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