Question

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

时，我想呈现User compoent

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)
})

但是，当我尝试导航到＆＃34; http://localhost:8080/users＆＃34;时，我无法在index.html中看到Users组件。所有文件都来自vue-cli webpack -简单。更重要的是，控制台中没有错误。我无法说出它有什么问题。

Answer 1

将历史记录模式添加到路由器，如下所示

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

在没有历史记录模式的情况下，您需要在搜索中添加＃，例如 http://localhost:8080/#/users ，以使其有效。

有关历史记录模式阅读文档here

的详细信息

为什么我的<router-view>能够呈现？

1 个答案: