关于javascript：vue.js路由器链接未加载组件

vue.js router-link does not load component

我是vue.js的新手，并制作了Landing组件，该组件链接到Login组件。我要实现的是，当用户单击"登录"时，将显示登录页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>

<router-link to="/login">Login</router-link>

</template>

export default {
name: 'Landing',
data: function () {
return {
}
},
methods: {

}
}

main.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Materials from"vue-materials"

import Routes from './routes'

const router = new VueRouter({
routes: Routes,
mode: 'history'
});

Vue.use(Materials)
Vue.use(VueRouter);

Vue.config.productionTip = false

new Vue({
router: router,
render: h => h(App)
}).$mount('#app')

App.Vue：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<template>

<head>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css" rel="stylesheet">
</head>

<NavbarComp/>
<Landing/>
<FooterComp/>

</template>

import NavbarComp from './components/Navbar.vue';
import FooterComp from './components/Footer.vue';
import Landing from './components/Landing.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';

export default {
name: 'app',
components: {
NavbarComp,
Landing,
FooterComp,
Login,
Register
}
}

routes.js：

1
2
3
4
5
6
7
8
9

import Login from './components/Login.vue';
import Register from './components/Register.vue';
import Landing from './components/Landing.vue';

export default [
{path: '/login', component: Login, name: 'Login'},
{path: '/register', component: Register, name: 'Register'},
{path: '/', component: Landing, name: 'landing'},
]

最后，Login.vue：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>

Login

</template>

import axios from 'axios';

export default {
name: 'Login',
data: function () {
return {
ok: true,
showErrorRegister: false,
showErrorLogin: false,
username:"",
password:"",
email:"",
error:"",
}
},

当我单击"登录"链接时，URL栏中的链接会更改，但是该组件没有出现，并且在控制台中没有看到任何错误。所以不知道从这里去哪里。

我该如何解决？