无法使路由器工作

Question

这是我的 router/index.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 它都会呈现主页模板，我错过了什么？

这是我的app.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: [
  ...

无法使路由器工作

Cant make router work

vue.js

vue-router