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

使用路由获取页面参数

在路由中设置path：

{

path: '/detail/:id/',

name: 'detail',

component: detail,

meta: {

title: '详情'

}

}

获取参数

let id = this.$route.params.id

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()