这是一个帖子详情页的组件,通过相同前缀路/news/details/但不同参数newsId进入不同的帖子详情页
index.js代码如下:
// router/index.js
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
name: "NewsDetailsHome",
path: "/news/details/:newsId",
component: NewsDetailsHome,
},
]
})
在我的页面中可以再次点击另一个帖子查看详情,此时会报错如下:
报错原因:多次点击跳转同一路由是不被允许的
解决方法:在index.js下
// router/index.js
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router);
// 添加如下
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
return originalPush.call(this,location).catch(err => err)
}
export default new Router({
mode: "history",
routes: [
{
name: "NewsDetailsHome",
path: "/news/details/:newsId",
component: NewsDetailsHome,
},
]
})