不能让路由器工作答案

【问题标题】：Cant make router work不能让路由器工作
【发布时间】：2018-06-26 16:59:55
【问题描述】：

这是我的路由器/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 或其他视图。

【问题讨论】：

阅读：HTML5 History Mode
如果您检查我的代码哈希是否被注释掉，您的意思是默认情况下？不添加任何模式？

标签： vue.js vue-router

【解决方案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: [
  ...

【讨论】：