vue实现跳转

Vue 实现页面跳转的方法

在 Vue 中实现页面跳转有多种方式，以下是常见的几种方法：

使用 router-link 组件

<router-link to="/about">跳转到关于页面</router-link>

可以添加额外的属性：

<router-link 
  to="/about" 
  active-class="active-link"
  exact
  replace
>
  关于我们
</router-link>

编程式导航

在组件方法中使用 $router 对象：

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

带参数跳转：

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

命名路由跳转：

this.$router.push({ name: 'user', params: { userId: '123' } })

路由替换

不留下历史记录：

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

前进后退导航

后退一页：

this.$router.go(-1)

前进一页：

this.$router.go(1)

动态路由匹配

定义带参数的路由：

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

获取路由参数：

this.$route.params.id

导航守卫

全局前置守卫：

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

组件内守卫：

beforeRouteEnter(to, from, next) {
  // 组件创建前调用
  next()
}

路由懒加载

优化性能的懒加载方式：

const User = () => import('./views/User.vue')

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

命名视图

多视图同时显示：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        sidebar: Sidebar
      }
    }
  ]
})

以上方法覆盖了 Vue 中实现页面跳转的主要场景，可根据具体需求选择合适的方式。对于复杂应用，建议结合导航守卫和路由元信息实现更精细的控制。