获取url参数有两种情况:应用场景一:内部页面之间互相传值假如要从A页面跳转到B页面,,我来为大家科普一下关于vue-router的跳转方式?下面希望有你要的答案,我们一起来看看吧!

vue-router的跳转方式(vue-router获取url传参)

vue-router的跳转方式

获取url参数有两种情况:

应用场景一:内部页面之间互相传值假如要从A页面跳转到B页面,

this.$router.push({path:"/B",query:{ Id : this.tId , ... }})

进入B页面之后,

this.Id = this.$route.query.Id;

就能将A页面的id传入B页面,进行参数获取。

应用场景二:外系统跳转Vue项目时自带参数例如: https://shq5785.blog.csdn.net/list?Id=sunhuaqiang1#/

外系统跳转进入的url会在Vue项目编译后自动添加 “#/”后缀 ,其中带的参数在 “#/”之前,所以应用场景一中的方法无法获取,只能应用JS的方法来获取,解析功能函数如下所示:

getURLParams(url) { let param = url.split('#')[0]; //获取#/之前的字符串 var paramContent = param.split('?')[1]; //获取?之后的参数字符串 var paramsArray = paramContent.split('&'); //参数字符串分割为数组 var paramResult = {}; //遍历数组,拿到json对象 paramsArray.forEach((item, index, paramsArray) => { paramResult[paramsArray[index].split('=')[0]] = paramsArray[index].split('=')[1]; }) return paramResult; }

调用方式如下:

this.getURLParams(window.location.href)

vue-router获取url传参 | 《Linux就该这么学》 (linuxprobe.com)

,