vue router-view 页面不可交互

Question

使用vue-router进行路由 然后路由出来的页面不可交互 input和button都无法点击

router.js

import { configRouter } from '../../common/base/router'

const routes = [
    { path: '/', redirect: '/login' },
    {
        path: '/login',
        component: require('../components/login/Login.vue').default
    },
    {
        path: '/register',
        component: require('../components/register/Register.vue').default
    },
]

export default configRouter(routes)

APP.VUE

<template>
    <div class="warp" :class="skin">
        <router-view class="router-view"></router-view>
    </div>
</template>

Login.vue

<template>
    <div class="login_frame">
        <div class="login_logo">问卷之星</div>
        <div class="login_main">
            <div class="login_mainbg"></div>
            <div class="login_input">
                <i class="icon_username"></i>
                <input type="text" placeholder="请输入用户名" v-model="username">
            </div>
            <div class="login_input">
                <i class="icon_password"></i>
                <input v-model="password" type="password" placeholder="请输入密码">
            </div>
            <div class="login_check">
                <input type="checkbox" v-model="checked">
                <span>记住我</span>
            </div>
            <div class="login_signin">登录</div>
            <router-link class="login_register" :to="'/register'" tag="div">注册</router-link>
        </div>
        <div class="login_copyright">Copyright© 2017-2020 All Rights Reserved .</div>
    </div>
</template>

Answer 1

component: require('../components/register/Register.vue').default

是什么语法？
难道不应该用import么？

import name from 'index.vue'
component:name

或者直接

component:()=>import('index.vue')