vue 获取元素在浏览器的位置_vue获取浏览器地址栏参数(?及/)路由+非路由实现方式...

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

代码截图：

效果截图：

希望这篇文章对你有所帮助。