vue不通過路由直接獲取url中參數(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ù)，而且這個參數(shù)是需要在vue的路由中提前設(shè)置好的。
相對來說，在某些情況下直接在url后面拼接？mid=100的方式傳遞參數(shù)更靈活，你不需要設(shè)置路由，只需要在url后拼接參數(shù)即可，但是這種方式就需要通過javascript獲取并提取url中的參數(shù)，通過傳統(tǒng)的方式直接在頁面中獲取是行不通的了，因為vue中是無法通過location.search()來獲取url問號之后的內(nèi)容的。
當(dāng)然，這個問題也有解決方法，就是把獲取參數(shù)的腳本代碼注冊成全局方法就可以了。下面話不多說了，來一看看詳細(xì)的方法示例吧。
示例代碼
第一步：創(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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
Vue.js實現(xiàn)數(shù)據(jù)雙向綁定的代碼示例
在我們使用vue的時候,當(dāng)數(shù)據(jù)發(fā)生了改變,界面也會跟著更新,但這并不是理所當(dāng)然的,我們修改數(shù)據(jù)的時候vue是如何監(jiān)聽數(shù)據(jù)的改變以及當(dāng)數(shù)據(jù)發(fā)生改變的時候vue如何讓界面刷新的,所以本文就給大家講講Vue.js 數(shù)據(jù)雙向綁定是如何實現(xiàn)的2023-07-07
這篇文章主要為大家詳細(xì)介紹了最基礎(chǔ)的vue.js雙向綁定操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了VUE的tab頁面切換的四種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細(xì)介紹了vuejs移動端實現(xiàn)div拖拽移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了使用Vue實現(xiàn)移動端左滑刪除效果，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue中用props給data賦初始值遇到的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
關(guān)于Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效）
這篇文章主要介紹了Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效）,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue組件基礎(chǔ)操作，組件是vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用2023-01-01
本文主要介紹了使用ElementUI寫一個前端分頁查詢的實例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
el-select自定義指令實現(xiàn)觸底加載分頁請求options數(shù)據(jù)(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請求,獲取option的數(shù)據(jù),下面給大家分享el-select自定義指令實現(xiàn)觸底加載分頁請求options數(shù)據(jù)(附上完整代碼和接口可直接用),感興趣的朋友參考下吧2024-02-02