javascript - Vuejs路由失败了是什么原因？
本文介绍了javascript - Vuejs路由失败了是什么原因？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
补充：我解决了。。。忙了这么久，发现是没有给路由的路径加"/"的原因, 但是我看有些代码里确实没有加斜杠啊
原问题如下：
图
点击商品/评论/商家按钮, hash变化了, 但是<router-view>内容没有变化
index.html
<body>
<div id="app">
</div>
</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>
<div id="box">
<v-header></v-header>
<div class="tab">
<div class="tab-item">
<router-link to="goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="seller">商家</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>
<script>
import header from 'components/header/header'
export default {
components: {
'v-header': header
}
}
这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义
解决方案
/path 绝对路径
path 相对路径
所以假设现在路径是/goods,你点了另外一个路径就变成/goods/ratings了，然后找不到对应的路由
这篇关于javascript - Vuejs路由失败了是什么原因？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
