Vue路由组件传递参数的六种场景

一、引言

在Vue应用程序中，路由组件是构建单页应用的关键部分。传递参数给路由组件可以让我们动态地展示内容，处理用户输入，以及实现各种交互功能。

二、路由参数

路由参数(Route Params)：可以通过在路由路径中定义动态参数来传递数据。在路由配置中使用:来定义参数，然后在组件中通过this.$route.params来获取参数的值。

// 路由配置
{
  path: '/user/:id',
  component: UserComponent
}
// 组件中获取参数
this.$route.params.id

三、查询参数

查询参数(Query Params)：可以通过在URL中使用查询字符串的方式来传递参数。在组件中可以通过this.$route.query来获取查询参数的值。

// 路由配置
{
  path: '/user',
  component: UserComponent
}
// URL：/user?id=123
// 组件中获取参数
this.$route.query.id

params和query传参的区别

• query在刷新页面的时候参数不会消失，params刷新页面的时候参数会消失。
• 使用name+query或者path+query传递路径参数，使用name+params传递路径参数。
• query参数显示在url地址栏当中，参数以键值对的形式追加在URL后，用?和&拼接参数，而params传参不会显示在地址栏。
• query传参适合传递可选的参数，常用于根据用户的选择或配置进行筛选、排序等操作。params传参适合传递必要的、对应特定资源的参数，常用于标识性的参数传递。

四、路由元信息

路由元信息(Route Meta)：可以在路由配置中定义元信息来传递参数。在路由配置中使用meta字段来定义元信息，然后在组件中通过this.$route.meta来获取元信息的值。

// 路由配置
{
  path: '/user',
  component: UserComponent,
  meta: {
    isAdmin: true
  }
}
// 组件中获取元信息
this.$route.meta.isAdmin

五、Props传参

Props传参：可以通过在路由配置中使用props字段来传递参数。可以将props设置为true，这样路由组件会自动将路由参数映射为组件的属性。也可以将props设置为一个函数，来自定义参数的映射方式。

// 路由配置
const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true
    //props: { id: '123' }
    //props: (route) => ({ id: route.params.id })
  }
]
// 路由组件
const User = {
  props: ['id'],
  template: '<div>User ID: {{ id }}</div>'
}

六、编程式导航传参

可以使用router.push或router.replace方法进行编程式导航，并通过params或query字段传递参数。

router.push方法用于导航到一个新的路由，并将其添加到浏览器的历史记录中。可以通过第二个参数传递参数。

// 路由参数
router.push({path: '/user/123'})
// 获取参数
console.log(this.$route.params.id);
// 查询参数
router.push({path: '/user', query: { id: 123 } })
// 获取参数
console.log(this.$route.query.id);

当使用router.push方法进行路由跳转时，如果传递的路径中包含动态参数（例如/user/:id），则参数会被解析为路由的params属性。

router.replace方法也用于导航到一个新的路由，但是不会将新的路由添加到浏览器的历史记录中，而是替换当前的路由。同样可以通过第二个参数传递参数。

router.replace({ path: '/user/123', params: { id: 123 } });
// 获取参数
this.$route.params.id

在上述示例中，使用path属性指定了目标路径为/user/123，并使用params属性传递了参数，其中id参数的值为123。

七、声明式导航传参

在Vue Router中，可以使用router-link组件进行声明式导航，并通过to属性传递参数。例如，要传递参数到目标路径/user/123，可以使用以下方式。

<router-link :to="{ path: '/user/' + id }">User</router-link>
<router-link :to="{path:'/user', query:{id:123}}">User</router-link>

第一个router-link组件的to属性使用了动态的路径参数，这意味着在渲染时，id是一个变量，它的值将会动态地替换到路径中。例如，如果id的值是123，那么生成的链接将是/user/123。这种方式使用了params参数来传递参数给目标路由组件。

第二个router-link组件的to属性使用了查询参数，这意味着在生成的链接中，会在URL后面添加查询字符串，例如/user?id=123。这种方式使用了query参数来传递参数给目标路由组件。

export default {
  created() {
    // 获取传递的参数
    const userId = this.$route.params.id;
    console.log(userId); // 123
    // const userId = this.$route.query.id;
    // console.log(userId); // 123
  }
};

我们用this.$route.params.id和this.$route.params.id获取到传递的参数id的值，即123。

八、最后的话

能力一般，水平有限，本文可能存在纰漏或错误，如有问题欢迎指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝生活愉快！

以上就是Vue路由组件传递参数的六种场景的详细内容，更多关于Vue路由组件传递参数的资料请关注脚本之家其它相关文章！

最新评论