关于javascript：Vue-router仅显示基本路线

Vue-router only showing the base route

我正在尝试在vue-router上工作。但是，我遇到了一个问题，在查看了许多文章和文档后，找不到解决方案。

我已经阅读了几篇有关如何使用vue-router的文章，但是它们不起作用。

这是我的代码。
我已经制作了三个组件Home Login HelloWorld

我走了三条路。

这是代码

main.js：

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

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
// import Home from './components/Home.vue';
import HelloWorld from './components/HelloWorld.vue';
import Login from './components/Login.vue';

Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/hello', component: HelloWorld },
{ path: '/login', component: Login },
{ path: '/', component: App }
]
});

new Vue({
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>

<HelloWorld/>
<Login />

</template>

import HelloWorld from './components/HelloWorld.vue'
import Login from './components/Login.vue'

export default {
name: 'app',
components: {
HelloWorld,
Login
}
}

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>

Login

</template>

export default {
name: 'Login',

}


<style scoped>
</style>

HelloWorld.vue：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>

Hello World

</template>

export default {
name: 'HelloWorld',

}


<style scoped>
</style>

package.json

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

"name":"test-vue-router",
"version":"0.1.0",
"private": true,
"scripts": {
"serve":"vue-cli-service serve",
"build":"vue-cli-service build",
"lint":"vue-cli-service lint"
},
"dependencies": {
"core-js":"^2.6.5",
"vue":"^2.6.10",
"vue-router":"^3.0.6"
},
"devDependencies": {
"@vue/cli-plugin-babel":"^3.8.0",
"@vue/cli-plugin-eslint":"^3.8.0",
"@vue/cli-service":"^3.8.0",
"babel-eslint":"^10.0.1",
"eslint":"^5.16.0",
"eslint-plugin-vue":"^5.0.0",
"vue-template-compiler":"^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser":"babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

两条路线均不起作用。
每次，我通过更改URL按Enter键。基本路线(即/)始终显示。

它显示了App.vue组件。

谢谢！