vue开发 - 获取url后面的参数

最新推荐文章于 2025-05-21 16:36:12 发布

原创最新推荐文章于 2025-05-21 16:36:12 发布 · 7.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

vue.js 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了两种获取页面参数的方法：一是通过Vue路由获取参数，适用于动态路由；二是利用JavaScript函数从URL中解析参数，适用于非Vue环境。文章详细解释了如何在不同场景下正确配置并读取这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

2.使用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