Vue路由传值与重调本路由如何改变参数实现？

本文共计843个文字，预计阅读时间需要4分钟。

目录：一.vue 路由传值：方法一：（问题传值）方法二：query（此方法query的值会显示在地址栏中）方法三：params（此方法页面刷新数据会丢失）方法四：动态路由（此方法页面刷新数据不会丢失）

目录

• 一.vue路由传值
• 方法一：（问号传值）
• 方法二：query（此方法query的值会显示在地址栏中）
• 方法三：params（此方法页面刷新数据会丢失）
• 方法四：动态路由（此方法页码刷新数据不会丢失,推荐此方法！）
• 二.重调本路由改变参数

一.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地址显示为：

localhost:8080/#/B/1

二.重调本路由改变参数

有时候需要改变自己路由的参数来达到自己重调自己，举个例子：

小说网站的点击上下章节切换

其实就是在内部的单击事件中重调了自己的路由，不过传递的值不一样,点击后地址变为：

1.使用query方法，而不用再path指定路径了：

this.$router.push({ query: { id: 2 } });

url地址显示为：

localhost:8080/#/B/1?id=2

2.使用params方法，同样也不用再path指定路径了：

this.$router.push({ params: { id: 2 } })

url地址显示为：

localhost:8080/#/B/2

若要实现点击上下章切换不同的小说内容的功能，可以将query的id值进行加减，并重新调用后端接口获取数据来实现功能。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。