通过原生js获取路由url中的参数的实例和讲解

原文链接：http://blog.csdn.net/zhangwenwu2/article/details/77507381通过url传递参数是我们在开发中经常用到的一种传参方法，但通过url传递后改如果获取呢？下面这篇文章主要给大家介绍了关于vue如何不通过路由直接获取url中参数的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。前言众所周知vue中使用路由的方式设置url参数，但是这种方式

qq_39985511

9041人浏览 · 2018-04-21 15:30:35

qq_39985511 · 2018-04-21 15:30:35 发布

原文链接：http://blog.csdn.net/zhangwenwu2/article/details/77507381

通过url传递参数是我们在开发中经常用到的一种传参方法，但通过url传递后改如果获取呢？下面这篇文章主要给大家介绍了关于vue如何不通过路由直接获取url中参数的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。

前言

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

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

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

示例代码

第一步：创建utils.js文件，并保存到项目根目录

1

2

3

4

5

 
         export  
         default 
         { 
        
 
           
         getUrlKey: 
         function 
         (name){ 
        
 
            
         return 
         decodeURIComponent(( 
         new 
         RegExp( 
         '[?|&]' 
         +name+ 
         '=' 
         + 
         '([^&;]+?)(&|#|;|$)' 
         ).exec(location.href)||[, 
         "" 
         ])[1].replace(/\+/g, 
         '%20' 
         ))|| 
         null 
         ; 
        
 
           
         } 
        
 
         } 
        

第二步：在主js方法（main.js)中注册全局方法

1

2

3

 
         import utils   from  
         './utils'    
         //获取url参数 
        
         Vue.prototype.$utils=utils    
         //注册全局方法

第三步：vue文件中引用方法

1	`let channel=` `this` `.$utils.getUrlKey(` `"channel"` `)`

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^