• vue项目获取地址栏参数(非路由传参)


    在项目中,遇到一个需求,就是另一个系统直接跳转到我们项目中的某个页面,不需要做用户的校验直接单纯的跳转新页面,再初始化查询数据,参数以地址栏的形式传入

    由于原来项目做过权限控制,所以在路由那边需要进行配置(部分代码):

    const newPage = {
    	path:'/newPage',
    	component:() =>
    	 	import ('../views/newPage/newPage.vue').then(m => m.default),
    }
    
    export default new Router({
        mode: 'hash',
        base: __dirname,
        routes: [
            login,
            views,
            noFound,
            notMenu,
            newPage
        ],
    })
    
    

    重点::

    获取地址栏?后面参数的方法:

    export  function getUrlKey(name){
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/+/g, '%20')) || null
    }
    
    在newPage.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
    },
    
    
  • 相关阅读:
    laravel打印SQL语句
    php扩展打开不起作用的原因, php数字显示2147483647的原因
    opacity与rgba
    package.json中devDependencies与dependencies的区别
    FileReader读取文件
    Vue双向绑定原理详解
    Vue2入门路线及资源
    gulp入门实践
    浏览器版本识别
    this用法
  • 原文地址:https://www.cnblogs.com/yinxingen/p/9816902.html
Copyright © 2020-2023  润新知