vue cli实现跳转

vue cli实现页面跳转的方法

在Vue CLI项目中，页面跳转主要通过Vue Router实现。以下是几种常见的跳转方式：

使用<router-link>组件

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

这种方式会在DOM中渲染为<a>标签，适合模板中的声明式导航。

编程式导航

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

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

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

// 替换当前路由(无历史记录)
this.$router.replace('/login')

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

路由配置示例

// router/index.js
const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

动态路由匹配

// 获取路由参数
this.$route.params.id
this.$route.query.id

导航守卫

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

这些方法覆盖了Vue CLI项目中大部分路由跳转需求，可以根据具体场景选择合适的方式。编程式导航适合在方法中触发跳转，而<router-link>适合模板中的链接式跳转。