vue路由实现跳转

vue路由实现跳转的方法

在Vue.js中，通过Vue Router可以实现页面之间的跳转。以下是几种常见的路由跳转方式：

声明式导航 使用<router-link>组件实现跳转，适合在模板中使用：

<router-link to="/home">跳转到首页</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户页面</router-link>

编程式导航 在JavaScript代码中通过this.$router实现跳转：

// 字符串路径
this.$router.push('/home')

// 对象形式
this.$router.push({ path: '/home' })

// 命名路由
this.$router.push({ name: 'user', params: { userId: '123' } })

// 带查询参数
this.$router.push({ path: '/register', query: { plan: 'private' } })

替换当前路由 使用replace方法不会向history添加新记录：

this.$router.replace('/login')

前进/后退 控制浏览器的前进后退：

this.$router.go(1)  // 前进1页
this.$router.go(-1) // 后退1页

路由传参 可以通过params或query传递参数：

// params传参
this.$router.push({ name: 'user', params: { id: 1 } })

// query传参
this.$router.push({ path: '/user', query: { id: 1 } })

路由守卫 可以在跳转前后添加守卫逻辑：

router.beforeEach((to, from, next) => {
  // 跳转前逻辑
  next()
})

router.afterEach((to, from) => {
  // 跳转后逻辑
})

动态路由匹配 使用冒号标记路径参数：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

这些方法覆盖了Vue Router的大部分跳转场景，可以根据具体需求选择合适的方式实现页面导航。