vue实现界面跳转

Vue 实现界面跳转的方法

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

使用 router-link 组件

通过声明式导航实现跳转，适合模板中使用：

<router-link to="/path">跳转到目标页</router-link>

编程式导航

通过 JavaScript 代码实现跳转，更灵活：

// 跳转到指定路径
this.$router.push('/path')

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

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

替换当前路由

不保留历史记录：

this.$router.replace('/new-path')

前进/后退

控制浏览历史：

// 前进
this.$router.go(1)

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

路由配置示例

需要在 router/index.js 中配置路由：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: HomeComponent
  },
  {
    path: '/about',
    name: 'About',
    component: AboutComponent
  }
]

动态路由匹配

带参数的路由配置：

{
  path: '/user/:id',
  component: UserComponent
}

获取路由参数：

this.$route.params.id

导航守卫

可以在跳转前后添加逻辑：

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

这些方法覆盖了 Vue 中实现界面跳转的主要场景，根据具体需求选择合适的方式即可。