Vue router-link路由不同的写法,不一样的效果
Posted duanhuarong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue router-link路由不同的写法,不一样的效果相关的知识,希望对你有一定的参考价值。
我想要的路径:http://localhost:8080/#/main/hato/realtime/eventDetail/238
情况一:未进行路由配置:
{
path: ‘eventDetail‘,
name: ‘eventDetail‘,
component: () => import(‘@/views/security/alarm-management/eventDetail‘)
}
情况二:已进行路由配置
{
path: ‘eventDetail/:id‘,
name: ‘eventDetail‘,
component: () => import(‘@/views/security/alarm-management/eventDetail‘)
}
在情况一下:
路由用 name和params
路由跳转:http://localhost:8080/#/main/hato/realtime/eventDetail
路由用path和query
路由跳转:http://localhost:8080/#/main/hato/realtime/eventDetail?id=238
const showButton = {
props: ["scope"],
render: function(h) {
return (
<div>
<router-link to={{name: "eventDetail", params: {id: this.scope.row.id}}}>
查看详情
</router-link>
</div>
);
}
};
在情况二下:
路由用 name和params
路由跳转:http://localhost:8080/#/main/hato/realtime/eventDetail/238
路由用path和query 下面这个路径很奇怪,所以vue在router.js里面有个name属性
路由跳转:http://localhost:8080/#/main/hato/realtime/eventDetail/:id?id=238
const showButton = {
props: ["scope"],
render: function(h) {
return (
<div>
<router-link to={{path: "eventDetail/:id", query: {id: this.scope.row.id}}}>
查看详情
</router-link>
</div>
);
}
};
总结:query要用path来引入,params要用name来引入
以上是关于Vue router-link路由不同的写法,不一样的效果的主要内容,如果未能解决你的问题,请参考以下文章
Vue路由实现页面跳转的两种方式(router-link和JS)