vue-router4 传递参数

在Vue Router 4中，传递参数有两种方式：编程式导航和声明式导航。

1. 编程式导航

使用编程式导航时，可以使用`params`或`query`来传递参数。`params`用于传递动态路由参数，`query`用于传递查询参数。

（1）传递动态路由参数

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

// 传递参数
router.push({ name: 'User', params: { id: 123 }})

（2）传递查询参数

// 路由配置
const routes = [
  {
    path: '/user',
    name: 'User',
    component: User
  }
]

// 传递参数
router.push({ name: 'User', query: { name: 'search', age: 18 }})

2. 声明式导航

使用声明式导航时，可以在`<router-link>`标签中使用`to`属性来传递参数。`params`用于传递动态路由参数，`query`用于传递查询参数。

（1）传递动态路由参数

<!-- 模板 -->
<router-link :to="{ name: 'User', params: { id: 123 }}">User</router-link>

<!-- 路由配置 -->
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

（2）传递查询参数

<!-- 模板 -->
<router-link :to="{ name: 'User', query: { name: 'search', age: 18 }}">User</router-link>

<!-- 路由配置 -->
const routes = [
  {
    path: '/user',
    name: 'User',
    component: User
  }
]