vue如何获取跳转路径参数
本文小编为大家详细介绍“vue如何获取跳转路径参数”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue如何获取跳转路径参数”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
在Vue中进行路由跳转有两种方式:使用vue-router插件或者直接在页面中使用window.location.href进行跳转。无论是哪种方式,获取跳转路径参数的方法是类似的。
使用vue-router插件进行路由跳转
vue-router是Vue官方提供的路由插件,可以帮助我们在Vue中进行路由控制。在vue-router中,通过$route对象可以获取到当前路由的信息,包括跳转路径参数。
假设我们有一个路由配置如下:
{
path: '/detail/:id',
component: Detail
}
这里的:id表示这是一个路径参数,可以通过路由进行传递,例如/detail/123就代表id为123的详情页。
在目标页面Detail中,我们可以通过$route.params来获取传递过来的参数。代码如下:
export default {
name: 'Detail',
mounted() {
const id = this.$route.params.id; // 获取跳转路径参数id的值
console.log('id:', id);
}
};
在mounted钩子中,可以通过this.$route.params.id的方式获取到跳转路径中传递过来的id参数。
直接在页面中使用window.location.href进行路由跳转
在Vue中,我们也可以直接使用window.location.href进行页面跳转。例如:
window.location.href = '/detail?id=123';
这里我们将id参数拼接在了跳转的url中,下面我们来看如何在目标页面中获取这个参数。
我们可以使用location.search来获取跳转路径中问号后面的参数部分,然后再使用正则匹配获取我们需要的参数的值。代码如下:
export default {
name: 'Detail',
mounted() {
const query = location.search.substring(1); // 获取跳转路径参数字符串,去掉问号
const reg = new RegExp(`(^|&)id=([^&]*)(&|$)`); // 匹配id参数的正则表达式
const id = query.match(reg)[2]; // 获取跳转路径参数id的值
console.log('id:', id);
}
};
以上代码通过正则表达式匹配到id参数的值,并且存放在变量id中。
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码