vue路由跳转实现

Vue 路由跳转实现方法

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

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

通过 <router-link> 组件实现路由跳转，适用于模板中直接使用：

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

带参数的跳转：

<router-link :to="{ name: 'user', params: { id: 123 }}">用户详情</router-link>

编程式导航（通过 JavaScript 代码跳转）

在组件方法中通过 this.$router 实现跳转：

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

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

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

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

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

前进或后退：

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

动态路由匹配

在路由配置中使用动态参数：

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

在组件中获取参数：

this.$route.params.id

路由守卫

全局前置守卫：

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

组件内守卫：

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但该组件被复用时调用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    next();
  }
}

路由懒加载

通过动态导入实现路由懒加载：

const User = () => import('./views/User.vue');

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

命名视图

在同一路径下展示多个视图：

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      sidebar: Sidebar
    }
  }
];

模板中使用：

<router-view></router-view>
<router-view name="sidebar"></router-view>

这些方法覆盖了 Vue 路由跳转的主要场景，可以根据具体需求选择合适的方式实现路由导航。