vue路由传值的几种方式是什么

Vue.js 是前端 MVVM 框架中的常用工具，用于构建 Web 界面。通过 Vue.js 开发 Web 应用程序可以大大提高开发效率及 Web 应用程序的性能。在 Vue.js 中，路由是实现页面跳转的一个非常重要的机制。在使用 Vue.js 实现路由功能时，通常需要通过一些方式来传递参数，本文将会介绍几种 Vue.js 路由传值的方式。

1. 路由传参（动态路由传参）

Vue.js 的路由跳转通过路由路径和路由参数来实现。路由参数可以在路由路径中动态传递，这种传参方式叫做动态路由传参。

动态路由传参的方法非常简单。在定义路由时，只要在其路径中使用冒号“:”来标记需要动态传递的参数即可。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', // 动态路由参数
      component: User
    }
  ]
})

在这个例子中，路径 /user/:id 中的 :id 表示需要动态传递的参数。

在组件中，我们可以通过 $route.params 对象来获取动态路由中传递的参数。例如：

<template>
  <div>
    <p>User ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id
    }
  }
}
</script>

2. 查询参数传参

除了动态路由传参外，Vue.js 还支持通过查询参数的方式传递参数。查询参数是在 URL 中以 ? 开头的字符串参数，例如：

https://example.com/path/to/page?param1=value1&param2=value2

在 Vue.js 中，可以通过 $route.query 对象来获取查询参数。例如：

<template>
  <div>
    <p>Param 1: {{ param1 }}</p>
    <p>Param 2: {{ param2 }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param1: this.$route.query.param1,
      param2: this.$route.query.param2
    }
  }
}
</script>

3. 命名路由传参

除了通过动态路由和查询参数传递参数外，Vue.js 还支持通过命名路由传递参数。命名路由可以方便我们在组件之间跳转，以及传递参数。

在定义命名路由时，使用 name 属性来指定名称。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      name: 'user',
      component: User
    }
  ]
})

在组件中跳转到被命名的路由时，可以使用 $router.push 方法，如下所示：

this.$router.push({ name: 'user', params: { id: 1 }})

在目标组件中，可以通过 $route.params 对象来获取传递的参数。

4. props 传参

Vue.js 还支持使用路由的 props 选项来传递参数。使用 props 传递参数的好处是可以让组件更加清晰，精简代码。

在定义路由时，可以像下面这样指定 props：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

在这种情况下，参数会被放到组件的 props 属性中，例如：

<template>
  <div>
    <p>User ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  props: ['id']
}
</script>

综上所述，Vue.js 提供了多种方式来实现路由传参，包括动态路由传参、查询参数传参、命名路由传参和 props 传参。开发者可以根据实际情况选择适合自己的传参方式。