vue 路由传参的几种方式？如何传参/

Vue 路由传参的几种方式：

1. 命名路由传参：在定义路由时，使用 `name` 属性给路由命名，然后在 `<router-link>` 组件中使用 `:to="{name: '路由名称', params: {参数}}"` 的形式传递参数，例如：

// 定义路由
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

// 传递参数
<router-link :to="{name: 'User', params: {id: 123}}">用户详情</router-link>

2. 路径传参：在定义路由时，使用动态路径参数来传递参数，例如：

// 定义路由
const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

// 传递参数
<router-link to="/user/123">用户详情</router-link>

3. 查询参数传参：在 `<router-link>` 组件中使用 `:to="{path: '路径', query: {参数}}"` 的形式传递参数，例如：

// 传递参数
<router-link :to="{path: '/user', query: {id: 123}}">用户详情</router-link>

4. 状态参数传参：使用 Vuex 状态管理来传递参数，例如：

// 定义状态
const store = new Vuex.Store({
  state: {
    userId: ''
  },
  mutations: {
    setUserId(state, id) {
      state.userId = id
    }
  }
})

// 传递参数
<router-link @click="setUserId(123)" to="/user">用户详情</router-link>