Vue实现路由跳转的多种方式汇总

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

// 基本跳转
this.$router.push('/home')

// 带参数跳转
this.$router.push({ path: '/user', query: { id: '123' } })

// 命名路由跳转
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')
// 相当于把当前路由"覆盖"掉

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

// 前进两步
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（需提前配置动态路由）
})

// 方式3：props解耦（推荐！）
{
  path: '/user/:id',
  name: 'user',
  component: User,
  props: true  // 自动将params转为props
}

this.$router.push({
  path: '/important',
  query: { confirm: true }
}).catch(err => {
  // 用户取消了导航
  if (err.name === 'NavigationDuplicated') {
    alert('别急，已经在当前页啦！')
  }
})

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