vue中的路由传值与重调本路由改变参数
一.vue路由传值
在日常使用vue操作时，某些场景需要用到路由之间的传值，就是在使用router跳转到另外一个路由时需要携带参数一并传过去，这时候就需要用到路由传值
这里用举例的形式展示几种方法：
先来看看router文件
const routes = [{
path: '/',
component: A
},
{
path: '/B',
component: B
},
]在这里我们需要在A路由跳转到B路由并携带一些值过去
方法一：（问号传值）
在A路由中定义事件或使用<router-link>，这里使用事件展示：
this.$router.push("B?id=1");在B路由中获取传递的值：
console.log(this.$route.query.id);
方法二：query（此方法query的值会显示在地址栏中）
在A路由中定义事件或使用<router-link>，这里使用事件展示：
this.$router.push({
path: "B",
query: {
id: 1,
name: "litiezhu",
},
});query方式与方法一一样，在B组件中都是通过query方法获取值：
console.log(this.$route.query);
此时页面开发者工具中的Console中显示：
{id: 1, name: 'litiezhu'}方法三：params（此方法页面刷新数据会丢失）
在A路由中定义事件或使用<router-link>，这里使用事件展示，name必须与router文件定义的name名称一样：
this.$router.push({
path: "B",
params: {
id: 1,
name: "litiezhu",
},
});在B组件中通过params方法获取值：
console.log(this.$route.params);
方法四：动态路由（此方法页码刷新数据不会丢失,推荐此方法！）
1.配置router文件
const routes = [{
path: '/',
component: A
},
{
path: '/B/:id',
component: B
},
]2.在需要跳转的页面中
this.$router.push(/B/1);
3.在B组件中通过params方法获取值：
console.log(this.$route.params.id);
4.此时url地址显示为：
http://localhost:8080/#/B/1
二.重调本路由改变参数
有时候需要改变自己路由的参数来达到自己重调自己，举个例子：
小说网站的点击上下章节切换
其实就是在内部的单击事件中重调了自己的路由，不过传递的值不一样,点击后地址变为：
1.使用query方法，而不用再path指定路径了：
this.$router.push({ query: { id: 2 } });url地址显示为：
http://localhost:8080/#/B/1?id=2
2.使用params方法，同样也不用再path指定路径了：
this.$router.push({ params: { id: 2 } })url地址显示为：
http://localhost:8080/#/B/2
若要实现点击上下章切换不同的小说内容的功能，可以将query的id值进行加减，并重新调用后端接口获取数据来实现功能。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。这篇文章主要介绍了vue.js绑定style和class的相关资料,需要的朋友可以参考下2016-10-10
本文通过实例代码给大家介绍了vue 莹石摄像头直播视频功能，文章还给大家提到了vue h5项目调用手机摄像头录像并上传的功能，需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了基于Vue.js实现tab滑块效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue项目中loadsh库常用方法说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vant 中van-list的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了使用Vue写一个datepicker的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue动态绑定class选中当前列表变色的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解
这篇文章主要介绍了启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解决办法,文中给出了详细的解决方法,并通过图文结合的方式介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue学习笔记之过滤器的基本使用方法,结合实例形式分析了vue.js过滤器的基本功能、用法与操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别，需要的朋友可以参考下2018-04-04
最新评论