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

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

posted @ 2020-11-04 13:54  niceyoo  阅读(2166)  评论(0编辑  收藏  举报