<router-link to="/home">回家</router-link>
<router-link :to="{ path: '/profile' }">我的主頁</router-link>

// 基本跳轉(zhuǎn)
this.$router.push('/home')

// 帶參數(shù)跳轉(zhuǎn)
this.$router.push({ path: '/user', query: { id: '123' } })

// 命名路由跳轉(zhuǎn)
this.$router.push({ name: 'user', params: { username: '我' } })

// params傳參必須用name，不能用path！
this.$router.push({ 
  name: 'user', 
  params: { userId: '007' } // ? 正確
})

this.$router.push({
  path: '/user',
  params: { userId: '007' } // ? 無效！
})

this.$router.replace('/login')
// 相當(dāng)于把當(dāng)前路由"覆蓋"掉

// 后退一步
this.$router.go(-1)

// 前進(jìn)兩步
this.$router.go(2)

// 支付完成后禁止返回
paySuccess() {
  this.$router.replace('/success')
  // 再鎖死后退按鈕
  window.history.pushState(null, null, document.URL)
}

// 方式1：query傳參（URL可見）
this.$router.push({
  path: '/search',
  query: { keyword: 'Vue' }  // → /search?keyword=Vue
})

// 方式2：params傳參（URL不可見）
this.$router.push({
  name: 'user',
  params: { id: 123 }  // → /user/123（需提前配置動態(tài)路由）
})

// 方式3：props解耦（推薦?。?
{
  path: '/user/:id',
  name: 'user',
  component: User,
  props: true  // 自動將params轉(zhuǎn)為props
}

this.$router.push({
  path: '/important',
  query: { confirm: true }
}).catch(err => {
  // 用戶取消了導(dǎo)航
  if (err.name === 'NavigationDuplicated') {
    alert('別急，已經(jīng)在當(dāng)前頁啦！')
  }
})

router.beforeEach((to, from, next) => {
  if (to.path === '/vip' && !我.isVip) {
    next('/pay') // 不是VIP？先去充值！
  } else {
    next()
  }
})