无法使路由器工作

Question

这是我的路由器/索引.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'
import Login from '../views/Login'
Vue.use(Router)
export default new Router({
//mode: 'hash',
routes: [
{
path: '/',
component: Home
},
{
path: '/login',
component: Login
},
]
})

这是我的登录视图

<template>
<div class="page">
<p>
Login
</p>
</div>
</template>
<script>
export default {
components: { }
}
</script>

但是，无论我浏览到哪里，http://127.0.0.1:4000/login http://127.0.0.1:4000/home http://127.0.0.1:4000/asdasdf 呈现主模板，我错过了什么？

这是我的应用程序.js

import Vue from 'vue'
import { sync } from 'vuex-router-sync'
import App from './components/App'
import router from './router'
import store from './store'
sync(store, router)
const app = new Vue({
router,
store,
...App
})
export { app, router, store }

我运行开发服务器

npm run dev

如果我修改主模板，我会看到更改，但路由似乎不适用于/login 或其他视图。

Answer 1

在主组件中添加<router-view></router-view>(App.vue(：

<template>
<!-- html elements of the App.vue page -->
<!-- router component -->
<router-view></router-view>
</template>

并在路由器中指定历史记录模式：

export default new Router({
mode: 'history',
routes: [
...