vue-router获取url传参

vue-router获取url传递的参数分为两种情况。

获取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传参相关推荐

vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
vue路由通过url传参
直接拼到url上 `router.push(`/modelEdit/${id}`);` 对应的路由也要改成 `/modelEdit/:id`
记一次vue踩坑 this.$router.back()在ios失效,试了各种返回，最后发现是因为url传参的原因，去掉参数就可以了。。
因为之前有项目也用过类型的,我就找不同,发现之前项目的打包完直接用的....index.html访问现在的项目用的....index.html#/访问的 --------------------- ...
URL传参时从URL中获取中文参数的方法
利用url传参时如果url中的参数是中文时因为编码类型不同在页面中获取会出现乱码使用此方法能获取url中的参数值并解决乱码问题调用时直接 GetUrlByParamName("参数名& ...
vue前后端aes url传参解密再解base64编码
需求:我们公司做机票订购服务,有自己的平台的订单,也有第三方网站向我们网站导入的用户订单,第三方导入的是通过url传参的方式导入.url会携带用户的相关信息. url里面的参数是经过aes加密和bas ...
url传参获取参数方法
url传参获取参数方法 //调用const infos = this.getQuery(); //该方法返回一个对象 key 为所传参数名 value 参数值getQuery(key) {var s ...
JS获取当前页面url传参
JS获取当前页面url传参 function geturl(data) { //获取当前页面路径传参// var url = document.location.toString(); //获取当前页 ...
React通过url传参和通过路由传参
是基于我写的上一篇文章<用react的路由写一个简单的导航>上面扩展出来的,朋友们可以去康康. 通过url传参的方法有: 1)直接? 接收:this.props.location.sear ...
Vue学习（组件传参）-学习笔记
文章目录 Vue学习(组件传参)-学习笔记父到子子到父父操作子-ref(类似于操作dom) 兄弟之间传参 Vue学习(组件传参)-学习笔记父到子 Father:(index) <temp ...

vue-router获取url传参

vue-router获取url传参相关推荐

最新文章

热门文章