vue上如何获取跳转路径参数

发布时间：2023-09-09 11:00:26 所属栏目：教程来源：转载

导读： 　　为大家详细介绍“vue如何获取跳转路径参数”，内容详细，步骤清晰，细节处理妥当，希望这篇“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中。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!