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

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

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

// 錯誤示范1：path跳轉(zhuǎn)+params
this.$router.push({
  path: '/user',
  params: { userId: '我' }  // ? 完全丟失
})

// 錯誤示范2：未配置動態(tài)路由
{
  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參數(shù)會消失
})

// 正確寫法應(yīng)該這樣
this.$router.push({
  name: 'UserPage',
  params: { 
    userId: '我',
    from: 'home'  // ? 兩個參數(shù)都能收到
  }
})

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

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

// 獲取方式（在任何跳轉(zhuǎn)方式下都有效）
this.$route.query.keyword

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

// 組件內(nèi)
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()
  }
})