vue如何实现页面跳转

vue实现页面跳转的方法

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

使用router-link组件

通过Vue Router提供的<router-link>组件实现声明式导航：

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

编程式导航

在组件方法中使用this.$router.push进行跳转：

// 路径字符串
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({ path: '/home' })
// 或者
<router-link :to="..." replace></router-link>

前进后退导航

控制浏览器的前进后退行为：

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

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

路由传参方式

通过params或query传递参数：

// params传参（需在路由配置中定义）
this.$router.push({ name: 'user', params: { userId: 123 }})

// query传参（URL可见）
this.$router.push({ path: '/user', query: { userId: 123 }})

动态路由匹配

在路由配置中使用动态字段：

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

导航守卫

在跳转前后执行逻辑：

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

每种方法适用于不同场景，声明式导航适合模板中的简单跳转，编程式导航适合复杂逻辑控制，导航守卫适合全局权限控制等需求。