面试题：Vue Router在大型单页应用中路由懒加载与权限控制的结合

Question

在一个大型企业级Vue单页应用中，有大量的路由组件。要求实现路由懒加载以优化加载性能，同时针对不同角色的用户设置不同的路由访问权限。请阐述实现思路，并给出关键代码示例，包括如何配置路由懒加载以及如何在路由导航守卫中进行权限验证。

Answer 1

实现思路

1. 路由懒加载：在Vue Router中，使用动态导入语法import()实现路由组件的懒加载。这样在初始加载时，只有必要的路由组件会被加载，提高加载性能。
2. 权限验证：利用Vue Router的导航守卫（beforeEach），在路由切换前检查用户角色，并根据角色决定是否允许访问目标路由。

关键代码示例

1. 配置路由懒加载

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      // 路由懒加载
      component: () => import('@/components/Home.vue')
    },
    {
      path: '/admin',
      name: 'Admin',
      // 路由懒加载
      component: () => import('@/components/Admin.vue')
    }
  ]
});

export default router;

2. 在路由导航守卫中进行权限验证

router.beforeEach((to, from, next) => {
  const userRole = localStorage.getItem('userRole'); // 假设从本地存储获取用户角色
  const adminRoutes = ['/admin'];

  if (adminRoutes.includes(to.path) && userRole!== 'admin') {
    next('/home'); // 如果不是管理员角色，重定向到首页
  } else {
    next(); // 允许访问
  }
});