vue-router路由的多种传参方式

在Vue.js中，使用vue-router时，可以通过多种方式传递参数：

1. 使用路由的path属性传递参数：

// 定义路由
const routes = [
  { path: '/user/:id', component: User }
]
 
// 导航到路由，并传递参数
this.$router.push('/user/123')
 
// 在User组件中接收参数
this.$route.params.id

2. 使用query传递参数（类似GET参数）：

// 导航到路由，并传递查询参数
this.$router.push({ path: '/user', query: { id: 123 }})
 
// 在User组件中接收参数
this.$route.query.id

3. 使用params传递参数（需要配合name使用）：

// 定义路由时指定参数为必传
const routes = [
  { name: 'user', path: '/user/:id', component: User }
]
 
// 导航到路由，并传递参数
this.$router.push({ name: 'user', params: { id: 123 }})
 
// 在User组件中接收参数
this.$route.params.id

注意：使用params传参时，如果直接通过路径（path）导航，则无法传递参数，必须通过name属性和params配合使用。