vue实现路由跳转页面

路由跳转的实现方法

在Vue中实现路由跳转通常使用Vue Router，以下是几种常见的路由跳转方式：

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

<router-link to="/home">跳转到首页</router-link>

编程式导航 通过调用router实例方法实现跳转，适合在JavaScript逻辑中使用。

this.$router.push('/home')

带参数的路由跳转

传递params参数

// 跳转时传递
this.$router.push({ name: 'user', params: { id: 123 }})

// 接收参数
this.$route.params.id

传递query参数

// 跳转时传递
this.$router.push({ path: '/user', query: { id: 123 }})

// 接收参数
this.$route.query.id

路由跳转的其他方法

替换当前路由 不留下历史记录

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

前进后退

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

路由配置示例

确保路由已正确配置

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

导航守卫

可以使用导航守卫控制路由跳转

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

以上方法涵盖了Vue中路由跳转的主要场景，根据具体需求选择合适的方式即可。