Vue --关于传递参数

在Vue Router 4中，传递参数有两种方式：编程式导航和声明式导航。 1. 编程式导航 使用编程式导航时，可以使用`params`或`query`来传递参数。`params`用于传递动态路由参数，`query`用于传递查询参数。 （1）传递动态路由参数 ```javascript // 路由配置 const routes = [ { path: '/user/:id', name: 'User', component: User } ] // 传递参数 router.push({ name: 'User', params: { id: 123 }}) ``` （2）传递查询参数 ```javascript // 路由配置 const routes = [ { path: '/user', name: 'User', component: User } ] // 传递参数 router.push({ name: 'User', query: { name: 'search', age: 18 }}) ``` 2. 声明式导航 使用声明式导航时，可以在`<router-link>`标签中使用`to`属性来传递参数。`params`用于传递动态路由参数，`query`用于传递查询参数。 （1）传递动态路由参数 ```html <!-- 模板 --> <router-link :to="{ name: 'User', params: { id: 123 }}">User</router-link> <!-- 路由配置 --> const routes = [ { path: '/user/:id', name: 'User', component: User } ] ``` （2）传递查询参数 ```html <!-- 模板 --> <router-link :to="{ name: 'User', query: { name: 'search', age: 18 }}">User</router-link> <!-- 路由配置 --> const routes = [ { path: '/user', name: 'User', component: User } ] ```