vue獲取當(dāng)前路由地址

1、router和$route的區(qū)別

• $router: 路由操作對(duì)象，只寫(xiě)。需要對(duì)路由進(jìn)行操作時(shí)使用。如路由跳轉(zhuǎn)
• $route: 路由信息對(duì)象，只讀。獲取路由相關(guān)信息時(shí)使用。如獲取當(dāng)前路由地址

2、獲取當(dāng)前路由地址

this.$route.path

原生方法：

window.location.href

3、獲取路由參數(shù)（query/params傳參）

query傳參時(shí)：

路由跳轉(zhuǎn)：

this.$router.push({ name: 'name', query: { id: '123', data: '456' } })

獲取參數(shù)：

this.$route.query

params傳參時(shí)：

路由跳轉(zhuǎn)：

this.$router.push({ name: 'name', params: { id: '123', data: '456' } })

獲取參數(shù)：

this.$route.params

vue實(shí)時(shí)獲取路由地址

方式一：window.location

測(cè)試網(wǎng)址：http://www.myurl.com:8866/test?id=123&username=xxx

1.window.location.href（當(dāng)前URL）
        結(jié)果：http://www.myurl.com:8866/test?id=123&username=xxx

2.window.location.protocol（協(xié)議）
        結(jié)果：http

3.window.location.host（域名 + 端口）
        結(jié)果：www.myurl.com:8866

4.window.location.hostname（域名）
        結(jié)果：www.myurl.com

5.window.location.port（端口）
        結(jié)果：8866

6.window.location.pathname（路徑部分）
        結(jié)果：/test

7.window.location.search（請(qǐng)求的參數(shù)）
        結(jié)果：?id=123&username=xxx

	var url="www.baidu.com?a=1&b=2&C=3";//測(cè)試地址
	/*分析：最前面是?或&，緊跟著除 ?&#以外的字符若干，然后再等號(hào)，最后再跟著除 ?&#以外的字符，并且要分組捕獲到【除?&#以外的字符】*/
	var reg=/[?&]([^?&#]+)=([^?&#]+)/g;
	var param={};
	var ret =  reg.exec(url);
	while(ret){//當(dāng)ret為null時(shí)表示已經(jīng)匹配到最后了，直接跳出
		param[ret[1]]=ret[2];
		ret = reg.exec(url);
	}
	console.log(param)

8.window.location.origin（’?'前邊的URL）
        結(jié)果：http://www.myurl.com:8866

9.window.location.hash（獲取#之后的內(nèi)容）
        結(jié)果：null

方式二：vue-router

1.this.$route的內(nèi)容：

（1）this.$route.fullPath:

完成解析后的 URL，包含查詢參數(shù)和 hash 的完整路徑，即 “端口號(hào)/#” 之后的內(nèi)容。

（2）this.$route.hash

當(dāng)前路由的 hash 值 (帶 #) ，如果沒(méi)有 hash 值，則為空字符串。

（3）this.$route.matched

官網(wǎng)說(shuō)明：一個(gè)數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的路由記錄 。路由記錄就是 routes 配置數(shù)組中的對(duì)象副本 (還有在 children 數(shù)組)。

（4）this.$route.meta、this.$route.name

（5）this.$route.name

當(dāng)前路由的名稱(chēng)，如果有的話。

（6）this.$route.params

一個(gè) key/value 對(duì)象，包含了動(dòng)態(tài)片段和全匹配片段，如果沒(méi)有路由參數(shù)，就是一個(gè)空對(duì)象。

（7）this.$route.query

一個(gè) key/value 對(duì)象，表示 URL 查詢參數(shù)。如果沒(méi)有查詢參數(shù)，則是個(gè)空對(duì)象。

2.實(shí)時(shí)獲取route地址并根據(jù)地址做處理

watch: {
    $route(val) {
      //val即是this.$route
      //根據(jù)路由控制其他參數(shù)做不同處理
      if (val.path == "/xinyidai") {
        this.isCur = 5;
      } else if (val.path == "/fiProduct" || val.path == "/fiProductDetail") {
        this.isCur = 1;
      } else if (val.path == "/fiProductBx" ||val.path == "/fiProductBxDetail") {
        this.isCur = 2;
      } else if (val.path == "/stock" || val.path == "/stockDetail") {
        this.isCur = 4;
      } else {
        this.isCur = "";
      }
    },
  },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論