Vue路由传参避坑指南

// 路由配置
{
  path: '/user/:userId',
  name: 'UserPage',
  component: User
}

// 跳转方式1：命名路由+params
this.$router.push({
  name: 'UserPage',
  params: { userId: '我' }  // ✅ 有效
})

// 跳转方式2：完整path+params
this.$router.push({
  path: '/user/我',
  params: { age: 18 }  // ✅ age也能收到
})

// 错误示范1：path跳转+params
this.$router.push({
  path: '/user',
  params: { userId: '我' }  // ❌ 完全丢失
})

// 错误示范2：未配置动态路由
{
  path: '/product',
  name: 'Product',
  component: Product
}
this.$router.push({
  name: 'Product',
  params: { id: 123 }  // ❌ 刷新后丢失
})

// 这种写法params会消失！
this.$router.push({
  path: '/user/我',  // 虽然URL对了
  params: { from: 'home' }  // ❌ from参数会消失
})

// 正确写法应该这样
this.$router.push({
  name: 'UserPage',
  params: { 
    userId: '我',
    from: 'home'  // ✅ 两个参数都能收到
  }
})

// 路由配置
{
  path: '/search',
  component: Search
}

// 跳转方式
this.$router.push({
  path: '/search',
  query: { keyword: 'Vue教程' }  // → /search?keyword=Vue教程
})

// 获取方式（在任何跳转方式下都有效）
this.$route.query.keyword

// 路由配置
{
  path: '/article/:id',
  component: Article,
  props: route => ({
    id: route.params.id,
    from: route.query.from
  })
}

// 组件内
export default {
  props: ['id', 'from']  // 像普通props一样使用
}

router.beforeEach((to, from, next) => {
  if (to.name === 'Payment' && !to.params.orderId) {
    next({ name: 'Error', query: { msg: '订单ID缺失' } })
  } else {
    next()
  }
})