vue不通过路由直接获取url中参数的方法示例

时间:2024-04-17 14:30:38

vue不通过路由直接获取url中参数的方法示例

vuejs取得URL中参数的值
地址:http://localhost:3333/#/index?id=128
console.log(this.$route.query.id)
结果:128
============
使用路由获取页面参数
在路由中设置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