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
vue获取浏览器地址栏参数(?及/)路由+非路由实现方式相关推荐
- Vue进阶(六十五):Vue 隐藏浏览器地址栏参数或者将整个地址栏都隐藏只显示根目录
在使用Vue进行前端项目开发过程中,会遇到出于安全考虑,浏览器地址栏禁止显示方法参数的需求.以下方法可实现以上需求. 注:该方法存在页面刷新方法参数无法获取问题,需要另作处理(例如sessionSto ...
- 怎么获取浏览器地址栏的URL?怎么加密?
1.console.log(window.location.href); //获取浏览器地址栏的整个url2.console.log(window.location.protocol); //获取浏览 ...
- C#操作IE浏览器(打开url、获取浏览器地址栏的地址、模拟百度搜索)
下面的代码参考 https://www.cnblogs.com/kissdodog/p/3725774.html,非我原创,所以就标为转载 注意:下面的方法只适用于系统自带的IE浏览器,其它浏览器不适 ...
- js获取url地址栏参数的方法,解决中文乱码问题,能支持中文参数
js获取url地址栏参数的方法,解决中文乱码问题,能支持中文参数 参考文章: (1)js获取url地址栏参数的方法,解决中文乱码问题,能支持中文参数 (2)https://www.cnblogs.co ...
- js 获取浏览器url参数
一.获取浏览器地址url,并将url后的参数转化为数组. var baseUrl = function GetRequest(url) { var theRequest = new Object(); ...
- vue获取浏览器的指纹码
前言: 获取浏览器的指纹码 操作步骤: 1.vue安装插件 (1)使用CDN在线获取:https://cdnjs.com/libraries/fingerprintjs2 (2)使用bowerinst ...
- php 取得user_agent,php通过$_SERVER['HTTP_USER_AGENT']获取浏览器相关参数(转)
//获取浏览器 function getBrowse() { global $_SERVER; $Agent = $_SERVER['HTTP_USER_AGENT']; ...
- Vue获取浏览器唯一标识
`登陆时候可能需要向后台传输一个唯一标识符 具体实现思路如下: 1.引入js <!-- 获取唯一标识 --> <script type="text/javascript&q ...
- js获取浏览器的参数
http://www.weste.net/2005/12-21/11493397944.html 网上找的:挺优雅的 记下来 alert那块的id是参数名称 <script type=" ...
最新文章
- oracle创建表空间blocksize,oracle表空间大小的限制和DB_BLOCK_SIZE的概念
- @RequestBody的与@RequestParam.
- Linux 数据处理
- python 趋势线计算式_怎么将趋势线公式编辑成计算公式
- AD9的PCB技巧——环形焊盘的封装
- k8s节点加入master节点时超时:Initial timeout of 40s passed
- easyui datagrid deleteRow(删除行)的BUG或者updateRow值更新了不展示问题
- 深度搜索解决数独游戏
- Linux系统基础学习--ubuntu
- OpenCV4探索学习:OpenCV-4.1.0 Samples官方示例说明
- TMS320C6678开发笔记---IBL编译与分析1
- 揭秘京东区块链开源项目——JD Chain
- C++中getline()、gets()等函数的用法
- 如何查看电脑是否支持Wi-Fi 6
- iOS-使用Masonry布局不能立即获取到frame
- 古诗生成-pytorch
- 网页前端培训(CSS)
- 如何获取UEFI开源资源?
- Shopro商城,基于Fastadmin和Uniapp进行开发的多平台(微信公众号、微信小程序、H5网页、Android-App、IOS-App)购物商城
- 一行代码教你如何学会网络测速