Vue router-link路由不同的写法，不一样的效果

时间：2019-11-21 12:07:28 阅读：89 评论：0 收藏：0 [点我收藏+]

标签：button 写法 rop show tde params oca ams gem

我想要的路径：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路由不同的写法，不一样的效果

标签：button 写法 rop show tde params oca ams gem

原文地址：https://www.cnblogs.com/duanhuarong/p/11904365.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行