网络编程
位置：首页>> 网络编程>> JavaScript>> vue不通过路由直接获取url中参数的方法示例

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

作者：zhangwenwu　　发布时间：2024-04-30 08:41:06　

标签：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")

来源：http://blog.csdn.net/zhangwenwu2/article/details/77507381

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com