VUE路由传值的方式是怎样？如何用VUE实现？

VUE路由传值的方式

Vue-Router 传参可以分为两大类 分别是编程式的导航 router.push 和声明式的导航

1. 编程式的导航 router.push

编程式导航传递参数有两种类型：字符参数和对象参数。

1.1 字符串参数

字符串参数是最简单的一种参数类型，它可以是任何字符串。例如：

this.$router.push('/user/123')

上面的代码将把用户重定向到/user/123路由，并把123作为参数传递给路由组件。

1.2 对象参数

对象参数可以传递更复杂的数据结构。例如：

this.$router.push({
  path: '/user',
  query: {
    id: 123,
    name: 'John Doe'
  }
})

上面的代码将把用户重定向到/user路由，并把 { id: 123, name: 'John Doe' } 作为参数传递给路由组件。

2. 声明式的导航

声明式导航通过<router-link>组件来实现。<router-link>组件可以通过to属性来指定目标路由，并通过params和query属性来传递参数。例如：

<router-link to="/user/123">John Doe</router-link>

上面的代码将生成一个链接，当用户点击该链接时，将会把用户重定向到/user/123路由，并把123作为参数传递给路由组件。

2.1 查询字符串参数

也可以使用query属性来传递查询字符串参数。例如：

<router-link to="/user" query="{ id: 123, name: 'John Doe' }">John Doe</router-link>

上面的代码将生成一个链接，当用户点击该链接时，将会把用户重定向到/user路由，并把 { id: 123, name: 'John Doe' } 作为查询字符串参数传递给路由组件。

2.2 路径参数

还可以使用<router-link>组件来传递路径参数。路径参数是放在路由路径中的参数。例如：

<router-link to="/user/:id">John Doe</router-link>

上面的代码将生成一个链接，当用户点击该链接时，将会把用户重定向到/user/123路由，并把123作为路径参数传递给路由组件。

2.3 子路由参数

子路由参数是传递给子路由的特殊类型参数。子路由参数是在父路由的路径中定义的。例如：

<router-link to="/user/:id/profile">John Doe</router-link>

上面的代码将生成一个链接，当用户点击该链接时，将会把用户重定向到/user/123/profile路由，并把123作为子路由参数传递给路由组件。

3. props传值

还可以使用props属性来传递参数。例如：

<router-link to="/user/123" :props="{ id: 123, name: 'John Doe' }">John Doe</router-link>

上面的代码将生成一个链接，当用户点击该链接时，将会把用户重定向到/user/123路由，并把 { id: 123, name: 'John Doe' } 作为props传递给路由组件。

4. $route对象

$route对象是Vue-Router提供的对象，它包含了当前路由的信息。可以通过$route对象来获取路由参数。例如：

this.$route.params.id // 获取路径参数
this.$route.query.id // 获取查询字符串参数

5. 事件总线传值

事件总线是一种在Vue组件之间传递数据的机制。可以使用事件总线来传递路由参数。例如：

// 组件A
this.$eventBus.$emit('user-selected', { id: 123, name: 'John Doe' })

// 组件B
this.$eventBus.$on('user-selected', (user) => {
  this.$router.push({
    path: '/user/:id',
    params: { id: user.id }
  })
})

上面的代码中，组件A使用$eventBus对象触发了一个名为user-selected的事件，并把 { id: 123, name: 'John Doe' } 作为参数传递给了该事件。组件B使用$eventBus对象监听了user-selected事件，并把事件参数作为参数传递给了this.$router.push()方法。