vue怎么获取跳转路径参数-前端问答-PHP中文网

vue怎么获取跳转路径参数

PHPz

发布： 2023-04-18 16:00:16

原创

4033人浏览过

在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参数。

Media.io AI Image Upscaler

Media.io推出的AI图片放大工具

查看详情

直接在页面中使用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中。

总结

在Vue中获取跳转路径参数的方法很简单，无论是使用vue-router插件还是直接使用window.location.href进行跳转，我们都可以依靠$route或者location等对象来获取传递过来的参数。本文介绍了两种方式，开发者可以按照实际情况选择适合自己的方法。

以上就是vue怎么获取跳转路径参数的详细内容，更多请关注php中文网其它相关文章！