Vue Router 核心知识点

以下是 Vue Router 的核心知识点及示例说明，涵盖路由配置、导航守卫、动态路由、嵌套路由等核心功能：

一、路由配置

1. 基本路由定义

通过 routes 数组定义路径与组件的映射关系。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. 路由模式

支持 hash 和 history 模式：

// Hash 模式（URL 带 #）
// createWebHashHistory()

// History 模式（需服务器配置）
createWebHistory();

二、导航守卫

1. 全局前置守卫（beforeEach）

用于权限验证或全局拦截：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 跳转到登录页
  } else {
    next(); // 放行
  }
});

2. 路由独享守卫（beforeEnter）

在路由配置中定义：

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 验证管理员权限
      next();
    }
  }
];

3. 组件内守卫

在组件中使用 onBeforeRouteUpdate 或 beforeRouteLeave：

// Vue 3 组合式 API
import { onBeforeRouteLeave } from 'vue-router';

export default {
  setup() {
    onBeforeRouteLeave((to, from, next) => {
      const answer = window.confirm('确定离开吗？');
      next(answer); // 用户确认后离开
    });
  }
};

三、动态路由匹配

1. 动态参数（:id）

// 路由配置
{ path: '/user/:id', component: User }

// 组件中获取参数
// 模板中：{{ $route.params.id }}
// 组合式 API：const { id } = useRoute().params;

2. 参数作为 Props

通过 props: true 将参数传递给组件：

{ path: '/user/:id', component: User, props: true }

// User 组件中接收 props
export default {
  props: ['id']
};

四、嵌套路由

1. 配置子路由

使用 children 属性定义嵌套路由：

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      { path: '', component: Profile }, // /user
      { path: 'posts', component: Posts } // /user/posts
    ]
  }
];

2. 父组件中渲染子路由

在父组件模板中添加 <router-view>：

<!-- UserLayout.vue -->
<template>
  <div>
    <h1>用户页面</h1>
    <router-view></router-view> <!-- 子路由在此渲染 -->
  </div>
</template>

五、命名路由与命名视图

1. 命名路由

通过 name 标识路由，便于编程式导航：

// 路由配置
{ path: '/settings', name: 'Settings', component: Settings }

// 跳转时使用名称
router.push({ name: 'Settings' });

2. 命名视图

同一页面渲染多个视图：

<!-- App.vue -->
<template>
  <router-view name="header"></router-view>
  <router-view></router-view> <!-- 默认视图 -->
  <router-view name="footer"></router-view>
</template>

// 路由配置
{
  path: '/dashboard',
  components: {
    default: Dashboard,
    header: DashboardHeader,
    footer: DashboardFooter
  }
}

六、编程式导航

1. 基本跳转

// 字符串路径
router.push('/about');

// 对象形式
router.push({ path: '/about' });

// 命名路由
router.push({ name: 'About' });

// 替换当前历史记录（无后退）
router.replace('/login');

// 前进/后退
router.go(1); // 前进一步
router.go(-2); // 后退两步

2. 传递参数

// 路径参数
router.push({ name: 'User', params: { id: 123 } });

// 查询参数
router.push({ path: '/user', query: { name: 'Alice' } });

七、路由懒加载

使用动态导入 (import()) 实现按需加载：

const routes = [
  {
    path: '/about',
    component: () => import('../views/About.vue') // 懒加载
  }
];

八、路由元信息

通过 meta 字段存储额外信息（如页面权限）：

{
  path: '/admin',
  component: Admin,
  meta: { requiresAuth: true }
}

九、错误处理（404页面）

配置通配符路由捕获未匹配路径：

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

十、过渡动效

为路由切换添加动画：

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

总结

通过灵活运用这些功能，可以构建复杂且高效的单页面应用（SPA）。