Vue Router 核心功能详解：导航守卫与状态管理 | 极客日志

JavaScript大前端

Vue Router 核心功能详解：导航守卫与状态管理

Vue Router 进阶教程涵盖导航守卫（全局、路由独享、组件内）、嵌套路由配置、重定向与别名设置、历史模式选择（Hash/History/Memory）及元信息（meta）应用。同时介绍了状态管理库 Pinia 与 Vuex 的对比，并演示了 Pinia 的基本使用及持久化方案（LocalStorage/Cookies）。适合需要掌握 Vue 路由控制与数据管理的开发者。

深海蔚蓝发布于 2026/4/6更新于 2026/4/176 浏览

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 方法设置，它不会接收函数也不会改变导航本身：

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

next

router.afterEach((to, from) => {
  // 在这里你可以访问路由守卫结束后的状态，但不能改变状态。
  console.log('路由已切换');
  // 例如，记录日志或者统计页面访问等。
});

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

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 重定向的字符串路径/路径对象
      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: [...] 
})

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>

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

<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>

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

npm install pinia pinia-plugin-persistedstate

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