vue取url路径传参_vue不通过路由直接获取url中参数的方法示例

前言

众所周知vue中使用路由的方式设置url参数，但是这种方式必须要在路径中附带参数，而且这个参数是需要在vue的路由中提前设置好的。

相对来说，在某些情况下直接在url后面拼接？mid=100的方式传递参数更灵活，你不需要设置路由，只需要在url后拼接参数即可，但是这种方式就需要通过javascript获取并提取url中的参数，通过传统的方式直接在页面中获取是行不通的了，因为vue中是无法通过location.search()来获取url问号之后的内容的。

当然，这个问题也有解决方法，就是把获取参数的脚本代码注册成全局方法就可以了。下面话不多说了，来一看看详细的方法示例吧。

示例代码

第一步：创建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中参数的方法示例相关推荐

微信小程序uni.switchTab传参获取不到；小程序跳转到tabBar页并传参；uni-app微信小程序获取tabBar页面参数失败；uni-app微信小程序tabBar页面onLoad不执行
需求场景:从非tabBar页面B跳转到tabBar页面A,并想要携带参数. 如果使用uni.switchTab传参,会导致tabBAE页面获取不到参数: 原因: 官方文档有说,uni.switchTa ...
php 正则替换url参数,JavaScript正则获取地址栏中参数的方法分享
这篇文章主要介绍了JavaScript正则获取地址栏中参数的方法,涉及javascript基于正则的字符串截取操作相关实现技巧,需要的朋友可以参考下本文实例讲述了JavaScript正则获取地址栏中 ...
vue模块给模块传参_Vue店面的Paypal支付模块
vue模块给模块传参 Vue店面PayPal付款扩展 (Vue Storefront PayPal Payment Extension) PayPal Payment module for vue-s ...
vue调用函数怎么传参_Vue(非)父子组件的传值以及方法调用
1.vue父组件给子组件传值的方法子组件中通过props接收传值 props:{ username:{ type:String, default:"" } } 2.vue父组件调 ...
uni-app 父传子、子传父、路径传参、本地存储
一.父传子父传子步骤:①要动态绑定一个属性给子组件 ②子组件要接收父组件传过来的值,就要使用props接收 ③然后子组件就可以使用了代码实现: 父组件 //template代码 <Son : ...
Vue学习（组件传参）-学习笔记
文章目录 Vue学习(组件传参)-学习笔记父到子子到父父操作子-ref(类似于操作dom) 兄弟之间传参 Vue学习(组件传参)-学习笔记父到子 Father:(index) <temp ...
vue组件之间的传参总结
之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客一.父传子(prop) 第一步:在父组件中定义数据,例:tohome data () {return {tohome:" ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
vue 分享微信传参_vue 中使用微信分享接口（简单实用）
前言开发微信小程序时,基本上都要接入微信的SDK,而微信也提供了非常多的接口供我们去完成我们想要的功能.微信分享功能常常是我们在开发中常见的需求之一,本文将围绕微信分享接口使用展开,给自己以后碰到需 ...

vue取url路径传参_vue不通过路由直接获取url中参数的方法示例

vue取url路径传参_vue不通过路由直接获取url中参数的方法示例相关推荐

最新文章

热门文章