Vue Router 核心功能与进阶使用指南 | 极客日志

JavaScript大前端

Vue Router 核心功能与进阶使用指南

Vue Router 是构建单页应用的核心路由库。本文详解了导航守卫的三种类型及其权限控制实践，对比了 Hash 与 History 模式在 SEO 和服务器配置上的差异。通过嵌套路由实现页面层级结构，利用 meta 元信息增强路由灵活性。此外还探讨了状态管理方案，重点展示了 Pinia 在 Vue 3 中的轻量级持久化用法，帮助开发者构建更健壮的前端架构。

雾岛听风发布于 2026/3/29更新于 2026/4/251 浏览

Vue Router 核心功能与进阶使用指南

深入使用

导航守卫

在实际开发中，我们经常需要在路由跳转前后介入逻辑，比如权限验证或页面埋点。Vue Router 提供了多种守卫机制，灵活控制导航流程。

全局前置守卫 最常用的入口，通过 router.beforeEach 设置。它会在每次导航前触发，适合做统一的登录校验。

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

路由独享守卫 定义在路由配置对象中，仅对特定路由生效。相比全局守卫，粒度更细。

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

组件内守卫 当路由变化但组件被复用时，可以使用组件内的生命周期钩子。注意 beforeRouteEnter 无法获取 this 实例，需通过回调处理。

export default {
  beforeRouteEnter(to, from, next) {
    // 在路由进入前调用
    next();
  },
  beforeRouteUpdate() {
    
    ();
  },
  () {
    
    ();
  },
};

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

<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 = [
  { path: '/home', redirect: '/' },
  {
    path: '/users/:id/posts',
    redirect: (to) => {
      return to.path.replace(/posts$/, 'profile');
    },
  },
];

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

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

const router = createRouter({
  history: createWebHistory(),
  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>
    <button @click="increment">Increment</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 increment = () => counterStore.increment();
</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];
      }
    },
  },
});