Vue Router 详解（基础概念、核心功能与实战指南）

Vue Router 详解（基础概念、核心功能与实战指南）

Vue Router 是 Vue.js 官方路由管理器，用于构建单页面应用（SPA）的导航系统。以下是 Vue Router 的完整解析，涵盖基础概念、核心功能及最佳实践：

一、基础概念

1. 路由配置

• 基本结构：

  // router.js
  import { createRouter, createWebHistory } from 'vue-router';
  
  const routes = [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('./views/About.vue')
    }
  ];
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  });
  
  export default router;
  

2. 动态路由匹配

• 参数定义：

  {
    path: '/user/:id',
    component: UserProfile,
    props: true // 将路由参数作为 props 传递
  }
  

• 参数访问：

  // 组件内获取参数
  const route = useRoute();
  const userId = route.params.id;
  

3. 嵌套路由

• 配置示例：

  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      {
        path: 'analytics',
        component: AnalyticsView
      },
      {
        path: 'settings',
        component: SettingsView
      }
    ]
  }
  

4. 编程式导航

• 基础用法：

  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  router.push('/about'); // 字符串路径
  router.push({ name: 'User', params: { id: 123 } }); // 对象形式
  

二、核心功能

1. 路由守卫

• 全局守卫：

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

• 路由独享守卫：

  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: (to, from) => {
      return checkAdminPermission();
    }
  }
  

• 组件内守卫：

  export default {
    beforeRouteEnter(to, from, next) {
      // 组件实例未创建时调用
    },
    beforeRouteUpdate(to, from) {
      // 参数变化时调用
    }
  }
  

2. 过渡动画

• 路由级别动画：

  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
  

3. 滚动行为

• 自定义滚动：

  const router = createRouter({
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      } else {
        return { top: 0 };
      }
    }
  });
  

4. 懒加载

• 代码分割：

  const routes = [
    {
      path: '/dashboard',
      component: () => import('./views/Dashboard.vue')
    }
  ];
  

三、Vue Router 4（Vue 3 版本）新特性

1. 历史模式改进

• Hash 模式：createWebHashHistory()
• HTML5 模式：createWebHistory()
• 内存模式：createMemoryHistory()（适用于 SSR）

2. 路由匹配优化

• 通配符路由：

  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound
  }
  

3. 导航故障处理

• 错误捕获：

  router.push('/about').catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      throw err;
    }
  });
  

四、实战示例

1. 基础集成

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

2. 导航菜单

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

3. 权限控制

// router.js
router.beforeEach((to, from) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !store.state.isLoggedIn) {
    return {
      path: '/login',
      query: { redirect: to.fullPath }
    };
  }
});

五、常见问题解答

1. 如何修复重复导航错误？

• 方案：

  // 错误写法
  router.push('/home').catch(err => {});
  
  // 正确写法
  const push = router.push;
  router.push = function push(location) {
    return push.call(this, location).catch(err => {
      if (err.name !== 'NavigationDuplicated') throw err;
    });
  };
  

2. 如何获取前一个路由？

• 方案：

  const route = useRoute();
  const fromPath = route.query.redirect || '/';
  

3. 如何实现滚动记忆？

• 方案：

  const router = createRouter({
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      } else {
        return { top: sessionStorage.getItem('scroll-position') || 0 };
      }
    }
  });
  
  // 在组件卸载时保存位置
  import { onBeforeUnmount } from 'vue';
  onBeforeUnmount(() => {
    sessionStorage.setItem('scroll-position', window.scrollY);
  });
  

通过掌握 Vue Router 的核心功能，您可以构建出具有复杂导航需求的 Web 应用。对于需要权限控制或深度定制导航流程的项目，建议结合路由守卫和状态管理工具（如 Pinia）实现更精细的控制。