Vue如何获取当前页面的url及参数

使用路由获取页面参数

  1. 在路由中设置path:
{
    path: '/detail/:id/',
    name: 'detail',
    component: detail,
    meta: {
        title: '详情'
    }
}

获取参数

 let id = this.$route.params.id

备注:
1、参数名需要保持一致
2、如果路由中没有传参(http://192.168.1.12:8080/#/detail),会报错,页面无法显示,正常页面为 http://192.168.1.12:8080/#/detail/234

如果有的参数可传可不传,可以使用?传参
例如:http://192.168.1.12:8080/#/detail/?id=123
获取的时候:

let id = this.$route.query.id

这样即使取不到参数,页面也不会报错

使用js获取页面参数
如果是在普通js文件中,想获取url后面的参数,可以新建一个工具类,utils.js:

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

在其他需要获取参数的js中引入

import Vue from 'vue'
import utils from '../../assets/scripts/utils'
// Vue.prototype.$utils = utils // main.js中全局引入
let id = utils.getUrlKey('id')
console.log()

url为http://192.168.1.12:8080/#/detail/?id=123时,可以得到id为123

原创文章,作者:Uniapper,如若转载,请注明出处:https://www.uniapper.com/735.html

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 2022年1月25日 下午1:05
下一篇 2022年1月26日 下午12:14

相关推荐

发表回复

登录后才能评论
欢迎访问www.uniapper.com!交流QQ群:35429521