vue2 router 动态传参,多个参数的实例
作者:liuhongyi0104 时间:2024-05-11 09:13:17
这个是用vue-cli生成的项目下使用
比如有个路由跳转时需要带两个参数:
<router-link to='/tr'>查看</router-link>
可以这样写:
<router-link to='/tr/uid/pid'>查看</router-link>
然后去router.js 中 处理这个路由:
import Vue from 'vue'
import Router from 'vue-router'
import tr from '@/components/tr.vue'
import tab from '@/components/tab.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/tr/:uid/:pid',
name: 'tr',
component:tr
},
{
path:'/tab',
name: 'tab',
component:tab
}
]
})
需要在router.js 中使用vue-router,具体是在path:'/tr/:uid/:pid', 反斜杠后加冒号,意思是后面就是路由的参数。
然后去对应tr.vue组件中接受这个路由参数:
通过实例的this.$route.params,可访问这个key-value对象,
我们给请求路由赋个值看看:
<router-link to='/tr/15/122'>查看</router-link>
打印如下Object {uid: "15", pid: "122"}
来源:http://blog.csdn.net/liuhongyi0104/article/details/70242612
标签:vue2,router,动态传参,参数
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python网络编程之ZeroMQ知识总结
2022-07-06 20:16:25
![](https://img.aspxhome.com/file/2023/6/115006_0s.png)
基于Python自制一个文件解压缩小工具
2021-10-15 14:28:00
python多线程超详细详解
2023-08-09 09:10:23
解读iPhone平台的一些优秀设计思路
2010-06-24 21:53:00
![](https://img.aspxhome.com/file/UploadPic/20106/24/iphone_design_banner-88s.jpg)
使用Pytorch来拟合函数方式
2021-06-22 18:10:45
np.zeros()函数的使用方法
2023-11-10 06:33:36
python如何获取文件当前位置和定位某个位置
2022-01-10 17:40:36
![](https://img.aspxhome.com/file/2023/7/131457_0s.png)
详解Java使用sqlite 数据库如何生成db文件
2024-01-17 17:07:47
golang 监听服务的信号,实现平滑启动,linux信号说明详解
2024-05-09 10:00:43
![](https://img.aspxhome.com/file/2023/1/127041_0s.png)
解决Pytorch 加载训练好的模型 遇到的error问题
2022-07-21 11:10:45
![](https://img.aspxhome.com/file/2023/7/107137_0s.jpg)
Python 统计数据集标签的类别及数目操作
2023-04-08 12:04:09
![](https://img.aspxhome.com/file/2023/8/77678_0s.png)
Python常用的文件及文件路径、目录操作方法汇总介绍
2022-03-21 00:00:25
在Python中使用sort()方法进行排序的简单教程
2022-08-21 07:05:47
PHP中SESSION使用中的一点经验总结
2023-11-19 11:48:54
![](https://img.aspxhome.com/file/2023/8/98088_0s.jpg)
浅谈Django中的QueryDict元素为数组的坑
2023-08-22 18:55:54
![](https://img.aspxhome.com/file/2023/8/62588_0s.jpg)
Python爬虫框架Scrapy基本用法入门教程
2021-08-17 19:50:45
![](https://img.aspxhome.com/file/2023/4/111894_0s.png)
golang的httpserver优雅重启方法详解
2023-08-06 00:22:41
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2022-05-03 10:24:49
![](https://img.aspxhome.com/file/2023/6/101736_0s.jpg)
uniapp页面跳转的五种方式总结
2023-08-23 19:46:24
![](https://img.aspxhome.com/file/2023/6/56136_0s.png)
Python实现全排列的打印
2021-09-01 04:08:30