为什么我的 <router-view> 无法呈现？

Question

我是 vue-router 的菜鸟。这是我的代码，当我导航到 http://localhost:8080/users

时，我想呈现用户组件

App.vue 文件:

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Users.vue

<template>
    <div>
        <h1>xue yan</h1>
    </div>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Users from './Users.vue'

Vue.use(VueRouter);

const routes = [
  {path:'/users',component:Users}
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

但是，当我尝试导航到“http://localhost:8080/users”时，我在 index.html 中看不到用户组件。所有文件都来自 vue-cli webpack-simple。更何况没有报错console.I 说不出哪里不对

Answer 1

按如下方式为您的路由器添加历史记录模式

const router = new VueRouter({
      mode: 'history',
    routes,
 });

如果没有打开历史记录模式，您需要像这样在搜索中添加 # http://localhost:8080/#/users 才能使其生效。

详细了解历史模式阅读文档的原因here

为什么我的 <router-view> 无法呈现？

why can't my <router-view> be rendered?

vue.js

vue-router