Vue router-link路由不同的写法,不一样的效果
2024-09-05 09:30:17
我想要的路径: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来引入
最新文章
- 深入浅出node(2) 模块机制
- [Erlang 0121] 当我们谈论Erlang Maps时,我们谈论什么 Part 3
- Xcode playground markdown常用语法
- 卷土重来之staticHtml基础使用教程
- tree view
- string转换成color转
- task判断任务是否存在
- 欧几里得旅行商问题 java与c++实现
- android开发:点击缩略图查看大图
- 使用<;span>;标签为文字设置单独样式
- Oracle全角和半角处理函数
- jquery treeTable插件使用细则
- Jquery+Ajax限制查询间隔
- poj 2720 Last Digits
- Spring-Security自定义登录页&;inMemoryAuthentication验证
- Mysql 数据库管理
- Vue(二)基础
- LeetCode--No.002 Add Two Numbers
- Linux 小知识翻译 - 「TCP/IP」
- open()、fwrite()、fread()函数使用说明与示例