Vue Router 实战：守卫、嵌套路由和状态管理

全局前置守卫 最常见的场景还是登录态校验。只要目标页面需要权限，这里就能先拦一层。

router.beforeEach((to, from, next) => {
  if (to.path === '/protected' && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

全局后置钩子 router.afterEach 不会再继续控制导航，适合做日志、统计这类'事后处理'。

router.afterEach((to, from) => {
  console.log('路由已切换');
});

全局解析守卫 router.beforeResolve 会在组件内守卫和异步路由组件都解析完之后触发。和 beforeEach 相比，它更晚一点，适合需要确认'页面真的准备好了'再执行的逻辑。

嵌套路由

页面有层级关系时，嵌套路由比手动拼组件自然得多。父页面负责壳，子路由负责内容，<router-view> 就是中间那个插槽。

父组件模板 父组件里要留出 <router-view>，不然子路由没地方渲染。

<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 }
    ]
  }
];

如需查看官方文档详情，可参考 Vue Router 嵌套路由指南。

重定向与别名

重定向 重定向适合处理旧链接迁移。用户访问老地址时，路由系统把他带到新地址，页面结构不用额外兼容一层。

• 相对重定向：根据目标路由动态计算路径。
• 命名重定向：直接跳转到具名路由。

const routes = [
  // 将 /users/123/posts 重定向到 /users/123/profile
  {
    path: '/users/:id/posts',
    redirect: to => to.path.replace(/posts$/, 'profile')
  },
  // 跳转到具名路由
  { path: '/home', redirect: { name: 'homepage' } }
];

别名 别名和重定向不是一回事。alias 会让多个 URL 命中同一个路由记录，但浏览器里的地址栏不会变。这个特性在保留旧入口时挺方便，不过参数路由要小心处理，别名里缺参数通常会出问题。

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

若路由包含参数，需确保绝对别名中也包含这些参数，例如 alias: ['/:id']。

history 配置：指定历史模式

Vue Router 的历史模式选择，基本就是在'URL 好看'和'部署省事'之间做取舍。

• Hash 模式 (createWebHashHistory)：默认模式。URL 带 #，无需服务器配置，适合纯前端 SPA，但对 SEO 不友好。
• History 模式 (createWebHistory)：URL 简洁，无 #，需要服务器配置（如 Nginx 回退到 index.html），适合对 SEO 有要求的项目。
• Memory 模式 (createMemoryHistory)：不与 URL 交互，无历史记录，适合 Node 环境或 SSR，需在 app.use(router) 后手动 push 初始导航。

import { createRouter, createWebHistory } from 'vue-router';

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

路由元信息（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>

拓展

状态管理（Pinia / Vuex）

当页面之间开始共享登录态、购物车、筛选条件这类数据时，只靠路由参数就不太够了，状态管理库会更稳一点。

Pinia vs Vuex

• API 与易用性：Vuex 采用 Flux 风格，概念较多（State, Getter, Mutation, Action），学习曲线稍陡；Pinia 设计更简单，结合 Composition API，直观易上手。
• 响应式：Vuex 依赖 Vue 响应式系统且有特定约定；Pinia 完全基于 Vue 3 响应式系统，状态变化自动更新。
• DevTools 支持：两者均支持 Vue DevTools，Pinia 体验更友好。
• 生态：Vuex 资料丰富，存量项目多；Pinia 作为 Vue 3 官方推荐，生态正在快速扩展。

大型项目如果已经跑在 Vuex 上，没必要为了'新'硬切。新项目或者刚起步的模块，我更倾向 Pinia，少写一些样板代码，后面维护也轻松。

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
  }
});

初始化 Pinia

// main.ts
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');

Pinia 使用 Cookies 存储

Cookie 体积小，写起来也没那么优雅，但在只需要保存一点简单信息的时候，它确实够用。缺点也明显：你得自己处理读写，逻辑会比 localStorage 麻烦一点。

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];
      }
    }
  }
});