vue获取浏览器地址栏参数(?及/)路由+非路由实现方式

原创

niceyoo

修改于 2020-11-19 11:48:46

8.5K0

修改于 2020-11-19 11:48:46

文章被收录于专栏：niceyooniceyoo

1、? 参数

浏览器参数形式：http://javam4.com/m4detail?id=1322914793170014208

1.1、路由取参方式

this.$route.query.id

前端跳转方式：

一、onclick方式
<a 
   title="测试数据"
   @click="test(row.id)"
   target="_blank">
   <span>{{ row.title }}</span>
</a>

test(id) {
    this.$router.push({
        path: "/m4detail",
        query: {
            id: id
        }
    });
}

二、a标签直接跳转
<a 
   title="测试数据"
   :href="javam4.com/m4detail/' + row.id"
   target="_blank">
   <span>{{ row.title }}</span>
</a>

简单粗暴，只要你的浏览器地址栏参数带？号，不管你是咋跳转过来的， 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、/ 参数

浏览器参数形式：http://javam4.com/m4detail/1322914793170014208

2.1、路由方式

路由参数配置如下：

{ path: 'm4detail/:id', title: 'java面试网', name: 'm4detail', component: () => import('@/views/javam4/m4detail.vue') },

也就是由以前的 path: 'm4detail' > path: 'm4detail/:id'

这种方式需要 <router-link> 标签配合使用：

<router-link :to="路径"></router-link>

而界面跳转的时候因为通常是一个 <a> 标签，所以就可以不用了，直接套一层：

<router-link :to="`/m4detail/`+row.id" target="_blank">
    <a>
        <span>{{row.title}}</span>
    </a>
</router-link>

参数说明：

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
}

其中 directory 表示那个目录后面的参数，比如：javam4.com/m4detail/11111111111

那么在这取值就是 m4detail，其实使用这种方式，无非还是用正则表达式切割一下，如果觉得正则不满足大家也可以自行修改。

let id = this.getUrlKey("m4detail");
console.log("this.id:"+id);

代码截图：

效果截图：

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

文章首发地址：https://www.cnblogs.com/niceyoo/p/13925569.html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

登录后参与评论

0 条评论

热度