前言

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

相對來說，在某些情況下直接在url后面拼接？mid=100的方式傳遞參數更靈活，你不需要設置路由，只需要在url后拼接參數即可，但是這種方式就需要通過javascript獲取并提取url中的參數，通過傳統的方式直接在頁面中獲取是行不通的了，因為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不通過路由直接獲取url中參數的方法示例

本文地址: http://www.cppcns.com/ruanjian/java/200971.html

總結

以上是生活随笔為你收集整理的vue取url路径传参_vue不通过路由直接获取url中参数的方法示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。