Vue.js 路由器看不到组件答案

【问题标题】：Vue.js router doesn't see componentsVue.js 路由器看不到组件
【发布时间】：2019-06-16 02:27:38
【问题描述】：

我刚刚初始化了一个 Vue 应用程序并添加了一些新路由。但它们根本不起作用。

我的路由器/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 开发工具看到这些组件。怎么了？

【问题讨论】：

试试localhost:8000/#/sessions 和#
信息不足。尝试在线设置演示。
您如何使用您的路由器？你的代码中有new Vue({ router });吗？
@BoussadjraBrahim 谢谢你，它有效:)

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

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

vue-router 的默认模式是哈希模式——它使用 URL 哈希来模拟一个完整的 URL，这样当 URL 发生变化时页面就不会重新加载。

为了摆脱散列，我们可以使用路由器的历史模式，它利用 history.pushState API 来实现 URL 导航而无需重新加载页面：

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

【讨论】：

别忘了在 html 代码中使用router-view :)