Vue Router 实战：路由守卫、懒加载与滚动行为

路由表本身就是配置

Vue 3 项目里，路由通常用 Vue Router 4 的 createRouter 来声明。把路由集中写成一份配置数组，组件全部用动态 import 懒加载，浏览器只会在进入对应页面时才去拉取该模块的 JS，首屏体积因此显著下降。

import { createRouter, createWebHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "home",
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/admin",
    name: "admin",
    component: () => import("../views/Admin.vue"),
    meta: { requiresAuth: true, title: "后台" },
  },
];

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

export default router;

用全局前置守卫做鉴权

requiresAuth 这类标记写在 meta 上后，用一个 beforeEach 守卫统一拦截：未登录就跳到首页并带上回跳地址，已登录则放行。鉴权逻辑集中在一处，组件里不用各自判断。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem("token")) {
    next({ name: "home", query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

router.afterEach((to) => {
  document.title = (to.meta.title as string) ?? "默认标题";
});

滚动行为让体验更顺

默认情况下，路由切换后页面会停在上一个位置。用 scrollBehavior 让前进后退保留原位、普通跳转回到顶部，长列表页面不再需要手动滚动复位。

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition ?? { top: 0 };
  },
});

落地时的几个坑

• 动态 import 的路径要是相对路径，打包工具才能正确切分 chunk。
• 守卫里一定要调用 next，否则路由会卡住不动。
• 懒加载页面在低端设备上会有短暂白屏，可配合 loading 状态或骨架屏缓解。