Vue3 路由系统 (Vue Router) 详解

概述

Vue Router 是 Vue 官方的路由管理器，它让你可以构建单页面应用。简单来说，它负责根据 URL 的变化来显示不同的组件。

路由工作流程

基本配置

1. 安装和配置

// main.js
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import Home from "./views/Home.vue";
import About from "./views/About.vue";
import User from "./views/User.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
  {
    path: "/user/:id",
    name: "User",
    component: User,
    props: true,
  },
];

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

const app = createApp(App);
app.use(router);
app.mount("#app");

2. 路由视图

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link> |
      <router-link to="/user/123">用户123</router-link>
    </nav>

    <!-- 路由出口 -->
    <router-view />
  </div>
</template>

路由配置详解

1. 基本路由

const routes = [
  {
    path: "/", // 路径
    name: "Home", // 路由名称
    component: Home, // 组件
    alias: "/home", // 别名
  },
];

2. 动态路由

const routes = [
  {
    path: "/user/:id",
    name: "User",
    component: User,
    props: true, // 将路由参数作为 props 传递给组件
  },
  {
    path: "/post/:id(\\d+)", // 使用正则表达式限制参数格式
    name: "Post",
    component: Post,
  },
  {
    path: "/files/:pathMatch(.*)*", // 捕获所有路径
    name: "Files",
    component: Files,
  },
];

3. 嵌套路由

const routes = [
  {
    path: "/user/:id",
    name: "User",
    component: User,
    children: [
      {
        path: "", // 空路径表示父路由的默认子路由
        name: "UserProfile",
        component: UserProfile,
      },
      {
        path: "posts",
        name: "UserPosts",
        component: UserPosts,
      },
      {
        path: "settings",
        name: "UserSettings",
        component: UserSettings,
      },
    ],
  },
];

4. 命名视图

const routes = [
  {
    path: "/settings",
    name: "Settings",
    components: {
      default: Settings, // 默认视图
      sidebar: SettingsSidebar, // 侧边栏视图
      header: SettingsHeader, // 头部视图
    },
  },
];

<template>
  <router-view name="header" />
  <div class="container">
    <router-view name="sidebar" />
    <router-view />
  </div>
</template>

路由导航

1. 声明式导航

<template>
  <div>
    <!-- 基本链接 -->
    <router-link to="/home">首页</router-link>

    <!-- 命名路由 -->
    <router-link :to="{ name: 'User', params: { id: 123 }}">
      用户123
    </router-link>

    <!-- 带查询参数 -->
    <router-link :to="{ path: '/search', query: { q: 'vue' }}">
      搜索Vue
    </router-link>

    <!-- 带状态 -->
    <router-link :to="{ path: '/about', state: { from: 'home' }}">
      关于我们
    </router-link>
  </div>
</template>

2. 编程式导航

import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();

    const navigateToHome = () => {
      router.push("/");
    };

    const navigateToUser = (id) => {
      router.push({ name: "User", params: { id } });
    };

    const navigateWithQuery = (query) => {
      router.push({ path: "/search", query });
    };

    const goBack = () => {
      router.go(-1);
    };

    const replaceCurrent = () => {
      router.replace("/new-path");
    };

    return {
      navigateToHome,
      navigateToUser,
      navigateWithQuery,
      goBack,
      replaceCurrent,
    };
  },
};

路由参数和查询

1. 路由参数

// 路由配置
{
  path: '/user/:id',
  name: 'User',
  component: User,
  props: true
}

// 组件中使用
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },

  setup(props) {
    console.log('用户ID:', props.id)

    // 或者使用 useRoute
    const route = useRoute()
    console.log('用户ID:', route.params.id)
  }
}

2. 查询参数

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();

    // 获取查询参数
    const searchQuery = computed(() => route.query.q || "");
    const page = computed(() => parseInt(route.query.page) || 1);

    // 更新查询参数
    const updateSearch = (query) => {
      router.push({
        path: "/search",
        query: { ...route.query, q: query },
      });
    };

    const goToPage = (newPage) => {
      router.push({
        path: "/search",
        query: { ...route.query, page: newPage },
      });
    };

    return {
      searchQuery,
      page,
      updateSearch,
      goToPage,
    };
  },
};

路由守卫

1. 全局守卫

// main.js
const router = createRouter({...})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log('从', from.path, '到', to.path)

  // 检查是否需要登录
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

// 全局后置守卫
router.afterEach((to, from) => {
  console.log('路由切换完成')
  // 可以在这里做一些全局操作，比如页面标题更新
  document.title = to.meta.title || 'Vue App'
})

2. 路由独享守卫

const routes = [
  {
    path: "/admin",
    name: "Admin",
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next();
      } else {
        next("/403");
      }
    },
  },
];

3. 组件内守卫

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    // 组件内前置守卫
    onBeforeRouteLeave((to, from, next) => {
      if (hasUnsavedChanges()) {
        if (confirm("有未保存的更改，确定要离开吗？")) {
          next();
        } else {
          next(false);
        }
      } else {
        next();
      }
    });

    // 组件内前置守卫
    onBeforeRouteUpdate((to, from, next) => {
      // 路由参数变化时的处理
      console.log("路由参数从", from.params, "变为", to.params);
      next();
    });
  },
};

路由元信息

const routes = [
  {
    path: "/admin",
    name: "Admin",
    component: Admin,
    meta: {
      requiresAuth: true,
      requiresAdmin: true,
      title: "管理后台",
      keepAlive: true,
    },
  },
  {
    path: "/profile",
    name: "Profile",
    component: Profile,
    meta: {
      requiresAuth: true,
      title: "个人资料",
    },
  },
];

// 在组件中使用
export default {
  setup() {
    const route = useRoute();

    // 检查是否需要认证
    const requiresAuth = computed(() => route.meta.requiresAuth);

    // 检查是否需要管理员权限
    const requiresAdmin = computed(() => route.meta.requiresAdmin);

    // 获取页面标题
    const pageTitle = computed(() => route.meta.title);

    return {
      requiresAuth,
      requiresAdmin,
      pageTitle,
    };
  },
};

路由懒加载

const routes = [
  {
    path: "/home",
    name: "Home",
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
  },
  {
    path: "/user/:id",
    name: "User",
    component: () => import("../views/User.vue"),
  },
];

路由最佳实践

1. 路由组织

按功能模块组织路由
使用嵌套路由减少重复代码
合理使用路由懒加载

2. 路由守卫

在全局守卫中处理通用逻辑
在路由独享守卫中处理特定逻辑
在组件内守卫中处理组件相关逻辑

3. 路由参数

使用 props 传递路由参数
合理设计路由结构
处理路由参数变化

4. 错误处理

const routes = [
  {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    component: () => import("../views/NotFound.vue"),
  },
];

总结

Vue Router 为 Vue 应用提供了强大的路由管理能力。通过合理配置路由、使用路由守卫、处理路由参数等，可以构建出功能完整、用户体验良好的单页面应用。掌握这些概念和最佳实践，将帮助你构建出更好的 Vue 应用。