当前位置：首页 > VUE

vue 实现路由跳转

2026-03-29 02:35:33VUE

Vue 路由跳转的实现方法

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

声明式导航（模板中使用 <router-link>）

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

编程式导航（通过 this.$router）

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

// 跳转到指定路径并传递参数
this.$router.push({ path: '/user', query: { id: '123' } })

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

替换当前路由（不保留历史记录）

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

前进或后退历史记录

vue 实现路由跳转

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

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

路由传参的两种方式

query 传参

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

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

params 传参

// 需要在路由配置中定义参数
{
  path: '/user/:id',
  name: 'user',
  component: User
}

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

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

路由守卫控制跳转

可以在路由跳转前进行权限验证或其他操作：

vue 实现路由跳转

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

动态路由匹配

对于需要匹配不同参数的路由：

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

在组件中可以通过 this.$route.params 获取动态参数。

命名视图

对于需要同时显示多个视图的情况：

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

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