Vue获取url路由地址参数

Posted 2023-04-02 清风细雨_林木木

文章目录

• • 1.window.location
  • • 当前URL
    • 协议
    • 域名 + 端口
    • 域名
    • 端口
    • 路径部分
    • 请求的参数
    • 获取’?'前边的URL
    • 获取#之后的内容
  • 2.vue-router 获取参数
  • • this.$route
    • this.$route.fullPath
    • this.$route.hash
    • this.$route.matched
    • this.$route.meta
    • this.$route.params
    • this.$route.query

1.window.location

实例：http://www.myurl.com:8866/test?id=123&username=xxx

当前URL

window.location.href
结果：http://www.myurl.com:8866/test?id=123&username=xxx

协议

window.location.protocol
结果：http

域名 + 端口

window.location.host
结果：www.myurl.com:8866

域名

window.location.hostname（）
结果：www.myurl.com

端口

window.location.port（）
结果：8866

路径部分

window.location.pathname（）
结果：/test

请求的参数

window.location.search
结果：?id=123&username=xxx

备注：获取参数

// var url="www.baidu.com?a=1&b=2&C=3";//测试地址

/*
 * 分析：最前面是?或&，紧跟着除 ?&#以外的字符若干
 * 然后再等号，最后再跟着除 ?&#以外的字符
 * 并且要分组捕获到【除?&#以外的字符】
 */
 
var reg=/[?&]([^?&#]+)=([^?&#]+)/g;
var param=;
var ret =  reg.exec(url);
while(ret) // 当ret为null时表示已经匹配到最后了，直接跳出
	param[ret[1]]=ret[2];
	ret = reg.exec(url);

console.log(param)

获取’?'前边的URL

window.location.origin（）
结果：http://www.myurl.com:8866

获取#之后的内容

window.location.hash
结果：null

2.vue-router 获取参数

this.$route

this.$route.fullPath

this.$route.hash

this.$route.matched

this.$route.meta

this.$route.params

this.$route.query

vue中如何不通过路由直接获取url中的参数

前言：为什么要不通过路由直接获取url中的参数？

vue中使用路由的方式设置url参数，但是这种方式必须要在路径中附带参数，而且这个参数是需要在vue的路由中提前设置好的。

相对来说，在某些情况下直接在url后面拼接？mid=100的方式传递参数更灵活，你不需要设置路由，只需要在url后拼接参数即可，但是这种方式就需要通过javascript获取并提取url中的参数，通过传统的方式直接在页面中获取是行不通的了，因为vue中是无法通过location.search()来获取url问号之后的内容的。当然，这个问题也有解决方法，就是把获取参数的脚本代码注册成全局方法就可以了。

第一步：创建utils.js文件，并保存到项目根目录

1 export default{
2     getUrlKey:function(name){
3         return decodeURIComponent((new RegExp(‘[?|&]‘+name+‘=‘+‘([^&;]+?)(&|#|;|$)‘).exec(location.href)||[,""])[1].replace(/\+/g,‘%20‘))||null;
4     }
5 }

第二步：在主js方法（main.js)中注册全局方法

import utils         from ‘./utils‘             //获取url参数

Vue.prototype.$utils=utils            //注册全局方法

第三步：vue文件中引用方法

let channel=this.$utils.getUrlKey("channel")