vue-router获取url传参

79次阅读

共计 789 个字符，预计需要花费 2 分钟才能阅读完成。

导读	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;
}

调用方式如下：