当前位置：首页 > VUE

vue router实现路由跳转

2026-02-23 15:38:01VUE

vue router 路由跳转方法

声明式导航
使用 <router-link> 组件实现页面跳转，通过 to 属性指定目标路径：

<router-link to="/home">首页</router-link>
<router-link :to="{ path: '/user' }">用户页</router-link>
<router-link :to="{ name: 'profile', params: { id: 123 }}">带参数跳转</router-link>

编程式导航
通过 this.$router 调用方法实现跳转：

// 路径跳转
this.$router.push('/home'); 

// 对象形式跳转
this.$router.push({ path: '/register' });

// 命名路由跳转（需提前在路由配置中定义name）
this.$router.push({ name: 'user', params: { id: 1 } });

// 带查询参数跳转（URL显示为 /login?redirect=/dashboard）
this.$router.push({ path: '/login', query: { redirect: '/dashboard' } });

替换当前路由
不添加历史记录，直接替换当前路由：

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

路由返回/前进
控制历史记录跳转：

this.$router.go(-1); // 返回上一页
this.$router.go(1);  // 前进一页

动态路由与参数传递

路由配置
在路由定义中使用动态字段（以冒号开头）：

const routes = [
  { path: '/user/:id', component: User }
];

参数获取方式
在目标组件中通过 $route 获取参数：

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

// 获取查询参数（如 /user?id=123）
this.$route.query.id

导航守卫控制跳转

全局前置守卫
在路由跳转前进行权限校验：

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

组件内守卫
在组件中定义特定逻辑：

export default {
  beforeRouteEnter(to, from, next) {
    // 组件渲染前调用
    next(vm => {
      // 通过vm访问组件实例
    });
  },
  beforeRouteLeave(to, from, next) {
    // 离开组件时调用
    next();
  }
}