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