javascript - Vuejs路由失败了是什么原因？-PHP中文网问答

补充：我解决了。。。忙了这么久，发现是没有给路由的路径加"/"的原因, 但是我看有些代码里确实没有加斜杠啊

原问题如下：

图

点击商品/评论/商家按钮, hash变化了, 但是<router-view>内容没有变化

index.html

  <body>
    <p id="app">
    </p>
  </body>

main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import goods from 'components/goods/goods'
import ratings from 'components/ratings/ratings'
import seller from 'components/seller/seller'
// goods.vue、ratings.vue、seller.vue模板里的内容是各自的filename
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    { path: 'goods', component: goods },
    { path: 'ratings', component: ratings },
    { path: 'seller', component: seller }
  ]
})
/* eslint-disable no-new */
new Vue({
  router,
  components: {
    App,
    // 注册路由组件
    goods,
    ratings,
    seller
  },
  template: '<App></App>'
}).$mount('#app')

App.vue

<template>
  <p id="box">
    <v-header></v-header>
    <p class="tab">
      <p class="tab-item">
        <router-link to="goods">商品</router-link>
      </p>
      <p class="tab-item">
        <router-link to="ratings">评论</router-link>
      </p>
      <p class="tab-item">
        <router-link to="seller">商家</router-link>
      </p>
    </p>
    <router-view></router-view>
  </p>
</template>

<script>
import header from 'components/header/header'

export default {
  components: {
    'v-header': header
  }
}

let routes = [ { path: '/goods', component: goods }, { path: '/ratings', component: ratings }, { path: '/sellers', component: sellers } ] const router = new VueRouter({ routes, }) new Vue({ router, render: h => h(App) }).$mount('#app')