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: [
  ...

无法使路由器正常工作

1 个答案: