Vue Router 进阶实战：导航守卫、嵌套路由与状态管理 | 极客日志

JavaScriptNode.js大前端

Vue Router 进阶实战：导航守卫、嵌套路由与状态管理

Vue Router 高级用法涵盖导航守卫的权限控制逻辑、嵌套路由的结构设计、历史模式配置差异及元信息应用。对比 Vuex 与 Pinia 的状态管理方案，演示如何在 Pinia 中结合持久化插件实现数据本地存储，为构建复杂单页应用提供完整的路由与状态解决方案。

flc发布于 2026/4/9更新于 2026/4/263 浏览

Vue Router 进阶实战：导航守卫、嵌套路由与状态管理

深入使用

导航守卫

在实际项目中，我们往往需要在跳转前后拦截请求，比如做权限校验。这就是导航守卫的作用。

to 和 from 是即将进入的目标路由和当前导航正要离开的路由
next 是一个函数，用于控制路由的跳转逻辑
next()：继续执行路由
next(false)：中断当前路由，如果浏览器的 URL 改变了，那么 URL 会回到 from 路由
next('/path')：跳转到指定路径
next(error)：将控制权交给 router.onError()

组件内守卫

export default {
  beforeRouteEnter(to, from, next) {
    // 在路由进入前调用，此时组件实例尚未创建
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但组件被复用时调用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在路由离开前调用，常用于确认用户是否保存了数据
    next();
  }
};

路由独享守卫

这种守卫写在路由配置里，只在进入该路由时触发。

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 仅管理员可访问
      if (isAdmin()) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

全局后置钩子

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

router.beforeResolve((to, from, next) => {
  // 类似于 beforeEach，但是在这个守卫中，所有组件内守卫和异步路由组件被解析之后调用
  next();
});

router.beforeEach((to, from, next) => {
  // 例如，验证用户是否已登录
  if (to.path === '/protected' && !isLoggedIn()) {
    next('/login'); // 跳转到指定路径
  } else {
    next(); // 继续执行路由
  }
});

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

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        // 当/user/profile 匹配成功，UserProfile 将被渲染到 User 的 router-view 内部
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

const routes = [
  {
    // 将总是把/users/123/posts 重定向到/users/123/profile
    path: '/users/:id/posts',
    redirect: to => {
      return to.path.replace(/posts$/, 'profile');
    }
  }
];

// 简单重定向
const routes = [{ path: '/home', redirect: '/' }];

// 重定向到命名路由
const routes = [{ path: '/home', redirect: { name: 'homepage' } }];

// 带参数的重定向
const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      return {
        path: '/search',
        query: { q: to.params.searchText }
      };
    }
  },
  {
    path: '/search'
  }
];

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      {
        // 为这 3 个 URL（/users/24、/users/24/profile、/24）呈现 UserDetails
        path: 'profile',
        component: UserDetails,
        alias: ['/:id', '']
      }
    ]
  }
];

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      {
        // 为这 3 个 URL（/users、/users/list、/people）呈现 UserList
        path: '',
        component: UserList,
        alias: ['/people', 'list']
      }
    ]
  }
];

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

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

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

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

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

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

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

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>

npm install pinia pinia-plugin-persistedstate

// 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>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

const counterStore = useUserStore();
const count = computed(() => counterStore.count);
const doubleCount = computed(() => counterStore.doubleCount);
const increment = () => counterStore.increment();
const incrementAsync = async () => await counterStore.incrementAsync();
</script>

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 name = document.cookie.split('; ').find(row => row.startsWith('name='));
      if (name) {
        this.name = name.split('=')[1];
      }
    }
  }
});