一.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值进行加减,并重新调用后端接口获取数据来实现功能。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。