1、? 参数
1.1、路由取参方式
this.$route.query.id
前端跳转方式:
一、onclick方式
title="测试数据"
@click="test(row.id)"
target="_blank">
{{ row.title }}
test(id) {
this.$router.push({
path: "/m4detail",
query: {
id: id
}
});
}
二、a标签直接跳转
title="测试数据"
:href="javam4.com/m4detail/' + row.id"
target="_blank">
{{ row.title }}
简单粗暴,只要你的浏览器地址栏参数带 ?号,不管你是咋跳转过来的, this.$route.query 后面直接 . 对应的参数就可以取到值,比如 ?id=1323968&name=1111
对应效果如下:
1.2、js取参方式
在 mothod 方法添加如下方法:
getUrlKey: function (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}
调用直接通过 getUrlKey(参数名称),具体如下:
2、/ 参数
2.1、路由方式
路由参数配置如下:
{ path: 'm4detail/:id', title: 'java面试网', name: 'm4detail', component: () => import('@/views/javam4/m4detail.vue') },
也就是由以前的 path: 'm4detail' > path: 'm4detail/:id'
这种方式需要 标签配合使用:
而界面跳转的时候因为通常是一个 标签,所以就可以不用了,直接套一层:
{{row.title}}
参数说明:
to:跳转路径,对应路由的 path
target:跳转方式,跟a标签用法一样
界面取参:
this.$route.params.id
效果如下:
2.2、非路由方式
在 mothod 方法添加如下方法:
getUrlKey: function (directory) {
return decodeURIComponent((new RegExp('/' + directory + '.*/([^/]+)/?$').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}
那么在这取值就是 m4detail,其实使用这种方式,无非还是用正则表达式切割一下,如果觉得正则不满足大家也可以自行修改。
let id = this.getUrlKey("m4detail");
console.log("this.id:"+id);
代码截图:
效果截图:
希望这篇文章对你有所帮助。