vue不通過(guò)路由直接獲取url中參數(shù)的方法示例
前言
眾所周知vue中使用路由的方式設(shè)置url參數(shù)，但是這種方式必須要在路徑中附帶參數(shù)，而且這個(gè)參數(shù)是需要在vue的路由中提前設(shè)置好的。
相對(duì)來(lái)說(shuō)，在某些情況下直接在url后面拼接？mid=100的方式傳遞參數(shù)更靈活，你不需要設(shè)置路由，只需要在url后拼接參數(shù)即可，但是這種方式就需要通過(guò)javascript獲取并提取url中的參數(shù)，通過(guò)傳統(tǒng)的方式直接在頁(yè)面中獲取是行不通的了，因?yàn)関ue中是無(wú)法通過(guò)location.search()來(lái)獲取url問(wèn)號(hào)之后的內(nèi)容的。
當(dāng)然，這個(gè)問(wèn)題也有解決方法，就是把獲取參數(shù)的腳本代碼注冊(cè)成全局方法就可以了。下面話(huà)不多說(shuō)了，來(lái)一看看詳細(xì)的方法示例吧。
示例代碼
第一步：創(chuàng)建utils.js文件，并保存到項(xiàng)目根目錄
export default{
getUrlKey:function(name){
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
}
}
第二步：在主js方法（main.js)中注冊(cè)全局方法
import utils from './utils' //獲取url參數(shù) Vue.prototype.$utils=utils //注冊(cè)全局方法
第三步：vue文件中引用方法
let channel=this.$utils.getUrlKey("channel")
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要介紹了vue 組件基礎(chǔ)知識(shí)的相關(guān)資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下2021-01-01
VueJs 提供了強(qiáng)大的過(guò)濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過(guò)濾處理，返回需要的結(jié)果。這篇文章主要給大家介紹vue 過(guò)濾器filter實(shí)例，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例
這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
今天在做vue和springboot交互的一個(gè)項(xiàng)目的時(shí)候，想要基于前端實(shí)現(xiàn)一些只有登錄驗(yàn)證之后才能訪(fǎng)問(wèn)某些頁(yè)面的操作，所以在這里總結(jié)一下實(shí)現(xiàn)該功能的一個(gè)解決方案2021-10-10
vue中,在本地緩存中讀寫(xiě)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue中,在本地緩存中讀寫(xiě)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會(huì)用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)，詳細(xì)介紹了使用vue編寫(xiě)的日期組件,，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-03-03
詳解Vue demo實(shí)現(xiàn)商品列表的展示
這篇文章主要介紹了Vue demo實(shí)現(xiàn)商品列表的展示，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式，幫助大家更好的理解和學(xué)習(xí)vue路由，感興趣的朋友可以了解下2020-10-10