vue3如何获取url地址？后面的参数

只会cv的小前端

已于 2022-06-16 14:14:20 修改

阅读量1.1w

点赞数 2

分类专栏： vue3 文章标签： vue.js javascript

于 2022-04-20 15:33:41 首次发布

本文链接：https://blog.csdn.net/Wancc123/article/details/124298332

版权

vue3 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

本文介绍了在Vue.js中如何使用`useRouter`和`useRoute`来查询路由参数和路径。同时，提供了两种JavaScript方法，用于解析URL查询字符串，获取单个或所有参数。示例代码展示了解析URL中的`code`参数，并返回其值。这些方法对于前端开发人员在处理路由和URL参数时非常实用。

摘要由CSDN通过智能技术生成


import { useRouter, useRoute } from 'vue-router';
setup() {
	 let router = useRouter();
     let route = useRoute();

 }
  vue: 
  查询路由参数：route.query、route.params、route.path
  查询路由地址：router.currentRoute.value.path    
js方法 第一：
function GetQueryString(name) {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  let r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
  let context = '';
  if (r) context = r[2];
  return context ? context : '';
}
地址  http://localhost:8080/progressDtl?code=79a8a34a72d64396b74856470e62c3ef
GetQueryString('code')
得到  79a8a34a72d64396b74856470e62c3ef
只能获取单个变量参数

js方法 第二：
 function GetRequest(value) {
    //url例子：www.baidu.com?id="123456"&name="www"；  
    var url = decodeURI(window.location.search); //?id="123456"&name="www";
    var object = {};
    if (url.indexOf("?") != -1)//url中存在问号，也就说有参数。  
    {
      var str = url.substr(1);  //得到?后面的字符串
      var strs = str.split("&");  //将得到的参数分隔成数组[id="123456",name="www"];
      for (var i = 0; i < strs.length; i++) {
        object[strs[i].split("=")[0]] = strs[i].split("=")[1];//得到{id:'123456',name:'www'}
      }
    }
    return object[value];
  }
传value就可以得道对应参数信息
不传value 就直接return object  获取所有参数对象