Vue Router 进阶实战：导航守卫、历史模式与状态管理

全局前置守卫

最常用的守卫，通常用于全局权限校验。

router.beforeEach((to, from, next) => {
  // 例如，验证用户是否已登录
  if (to.path === '/protected' && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

全局后置钩子与解析守卫

router.afterEach 不会接收 next 函数，常用于日志记录或统计，因为它不改变导航本身。

router.afterEach((to, from) => {
  console.log('路由已切换');
  // 例如，记录日志或者统计页面访问等
});

router.beforeResolve 在所有组件内守卫和异步路由组件被解析之后调用，适合需要等待所有依赖加载完毕的场景。

嵌套路由

构建具有层级关系的页面结构时，嵌套路由非常有用。它允许在一个组件内部再渲染另一个路由视图。

父组件模板

<template>
  <div>
    <h2>用户页面</h2>
    <router-view></router-view>
  </div>
</template>

定义嵌套路由

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
];

注意：以 / 开头的嵌套路径将被视为根路径。这意味着你可以利用组件嵌套而不必在 URL 中体现层级结构。

重定向与别名

重定向

通过 routes 配置即可完成，常用于统一入口或清理 URL。

const routes = [
  { path: '/home', redirect: '/' },
  { path: '/home', redirect: { name: 'homepage' } }
];

相对重定向可以根据目标路由动态计算路径：

const routes = [
  {
    path: '/users/:id/posts',
    redirect: to => {
      return to.path.replace(/posts$/, 'profile');
    }
  }
];

别名

别名允许不同的 URL 映射到同一个组件，URL 保持不变。这对于 SEO 友好或旧链接兼容很有帮助。

const routes = [
  {
    path: '/',
    component: Homepage,
    alias: '/home'
  }
];

如果路由包含参数，需确保在任何绝对别名中包含它们：

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      {
        path: 'profile',
        component: UserDetails,
        alias: ['/:id', '']
      }
    ]
  }
];

history 配置：指定历史模式

Vue Router 支持三种历史模式，选择哪种取决于你的部署环境和需求。

1. Hash 模式 (createWebHashHistory)

   • 默认模式，URL 带井号（如 http://example.com/#/home）。
   • 无需服务器配置，适合纯前端 SPA。
   • SEO 效果一般。

2. History 模式 (createWebHistory)

   • URL 更简洁（如 http://example.com/home）。
   • 需要服务器配置回退到 index.html，否则刷新可能报 404。
   • 适合对 SEO 有要求的项目。

3. Memory 模式 (createMemoryHistory)

   • 不与浏览器 URL 交互，适合 Node.js 环境或 SSR。
   • 不会自动触发初始导航，需在 app.use(router) 后手动 push。
   • 无历史记录，无法后退或前进。

路由元信息（meta）

meta 字段是挂载在路由配置上的自定义数据，常用于权限控制或页面标题设置。

配置示例

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      requiresAuth: true,
      title: '控制面板'
    }
  }
];

守卫中使用

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { name: 'Login' };
  }
});

组件中获取

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.meta.title); // "控制面板"
</script>

拓展：状态管理

对于复杂或跨页面的数据传递，推荐使用状态管理库。Vue 生态中主要有 Vuex 和 Pinia 两种方案。

Pinia vs Vuex

• API 易用性：Vuex 采用 Flux 风格，概念较多（State, Getters, Mutations, Actions），学习曲线稍陡。Pinia 设计更现代化，结合 Composition API，在 Vue 3 的 Setup 语法糖下使用更直观。
• 响应式：Pinia 完全基于 Vue 3 的响应式系统，状态变化后组件自动更新，无需额外处理。Vuex 则依赖于 Vue 的响应式约定。
• DevTools：两者都支持 Vue DevTools，Pinia 的整体调试体验更为友好。
• 总结：新项目推荐首选 Pinia，若维护老项目或团队熟悉 Vuex，继续使用也无妨。

Pinia 基本使用

安装插件以支持数据持久化：

npm install pinia pinia-plugin-persistedstate

创建 Store

// store.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  actions: {
    increment() {
      this.count++;
    },
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.count++;
    }
  },
  persist: {
    enabled: true,
    storage: window.localStorage
  }
});

初始化

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate';

const app = createApp(App);
const pinia = createPinia();
pinia.use(createPersistedState());
app.use(pinia);
app.mount('#app');

组件中使用

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useUserStore } from '@/utils/store';

const counterStore = useUserStore();
const count = computed(() => counterStore.count);
const increment = () => counterStore.increment();
</script>

使用 Cookies 存储

虽然 Cookie 容量有限（约 4KB），但在某些场景下仍可用于简单的持久化。使用时需手动处理读写逻辑。

export const useUserStore = defineStore('user', {
  state: () => ({ name: null, age: null }),
  actions: {
    setName(name) {
      this.name = name;
      document.cookie = `name=${name}; path=/; max-age=3600`;
    },
    getName() {
      const row = document.cookie.split('; ').find(r => r.startsWith('name='));
      if (row) {
        this.name = row.split('=')[1];
      }
    }
  }
});