Vue.js 路由器看不到组件

Question

我刚刚初始化了一个 Vue 应用程序并添加了一些新路由。但是他们根本没用。

我的router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import QuestionList from '@/components/pages/QuestionList'
import SessionList from '@/components/pages/SessionList'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/questions',
      name: 'QuestionList',
      component: QuestionList
    },
    {
      path: '/sessions',
      name: 'SessionList',
      component: SessionList
    },
  ]
})

export default router

我的组件：

<template>


<h1>test</h1>
</template>

<script>
export default {
}
</script>

<style>
</style>

当我进入 localhost:8000/questions 或 localhost:8000/sessions 时，没有任何反应。 + 我没有通过 Vue 开发工具看到这些组件。怎么了？

Answer 1

如 official docs 中所述，您应该添加哈希 localhost:8000/#/sessions:

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload :

  const router = new VueRouter({
       mode: 'history',
        routes: [...]
  })

Vue.js 路由器看不到组件

Vue.js router doesn't see components

javascript

vue.js

vue-router

vue-component

vuejs2