前言

众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的。
相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的。

当然,这个问题也有解决方法,就是把获取参数的脚本代码注册成全局方法就可以了。下面话不多说了,来一看看详细的方法示例吧。
示例代码
第一步:创建utils.js文件,并保存到项目根目录

export  function getUrlKey(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文件中引用方法

import {getUrlKey} from './getUrlKey.js'
data() {
    return {
        LIFNR:'',       
    }
},
created(){
        // 地址栏:`http://localhost:9527/#/newPage?LIFNR=1000000524`
    //获取地址栏参数
        this.LIFNR = getUrlKey('LIFNR')
        console.log(this.LIFNR)  //1000000524
},
Logo

前往低代码交流专区

更多推荐