专栏首页niceyoovue获取浏览器地址栏参数(?及/)路由+非路由实现方式
原创

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/p/13925569.html

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何暂停一个正在运行的线程?

    停止线程是在多线程开发中很重要的技术点,比如在多线程持续处理业务代码时,由于处理逻辑中有第三方接口异常,我们就假设发送短信接口挂了吧,那么此时多线程调用短信接口...

    niceyoo
  • CentOS7防火墙端口

    niceyoo
  • 微信小程序里如何使用npm?小程序集成友盟举例

    点击构建之后,项目会自动帮我们进行构建,然后会多出一个miniprogram_npm文件夹:

    niceyoo
  • insert唯一键冲突的加锁情况分析

    今天分享的内容是MySQL里面insert语句在发生冲突的时候加锁情况,废话就不多说了,直接从例子开始吧。

    AsiaYe
  • Laravel关联模型中过滤结果为空的结果集(has和with区别)

    数据结构是三张表用户优惠券表(user_coupons)、优惠券表(coupons),商家表(corps),组优惠券表(group_coupons) (为了方便...

    砸漏
  • JMeter接口测试 (二) ~ 参数化

    上篇内容介绍了jmeter的基本使用, 略微提了如何做参数化, 本篇对参数化做进一步深入讲解, 参数化可以将一个变量使用不同数据, 比如有多个用户下...

    louiezhou001
  • 数据库MySQL-数据库表的水平拆分

    表的水平拆分是为了解决单表数据量过大的问题,水平拆分的表每一个表的结构都是完全一致的,以下面的peyment表为例来说明

    cwl_java
  • 字节跳动组合拳:左手C端,右手B端

    疫情突如其来,一时间百业凋零,航运旅游停滞、餐饮车市关停、传统的线下教育濒临绝地。

    刘旷
  • EasyUI+SpringMVC 单个/多个文件上传

    function uplodad( $('#fromNameId').form({ url:'controllerurl', onSubmit: funct...

    用户5640963
  • Django开发问题及解决方法汇总

    NameError: name 'reload' is not defined报错

    超蛋lhy

扫码关注云+社区

领取腾讯云代金券