vue不通過路由直接獲取url中參數(shù)的方法示例

前言

眾所周知vue中使用路由的方式設(shè)置url參數(shù)，但是這種方式必須要在路徑中附帶參數(shù)，而且這個參數(shù)是需要在vue的路由中提前設(shè)置好的。

相對來說，在某些情況下直接在url后面拼接？mid=100的方式傳遞參數(shù)更靈活，你不需要設(shè)置路由，只需要在url后拼接參數(shù)即可，但是這種方式就需要通過javascript獲取并提取url中的參數(shù)，通過傳統(tǒng)的方式直接在頁面中獲取是行不通的了，因為vue中是無法通過location.search()來獲取url問號之后的內(nèi)容的。

當(dāng)然，這個問題也有解決方法，就是把獲取參數(shù)的腳本代碼注冊成全局方法就可以了。下面話不多說了，來一看看詳細的方法示例吧。

示例代碼

第一步：創(chuàng)建utils.js文件，并保存到項目根目錄

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

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

 import utils from './utils' //獲取url參數(shù)
 
 Vue.prototype.$utils=utils //注冊全局方法

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

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

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com