Vue3.0实现路由懒加载和设置路由守卫

1.路由懒加载，是一种性能优化手段，作用体现于：减少应用启动时间，提高用户体验，降低资源消耗，按需加载资源，优化页面性能，等方面。这在开发过程中也是必不可少的。
2.路由守卫，一般用到最多的就是登录权限校验，判断用户是否登录，一般使用的最多的还是全局前置守卫（beforeEach），我这举的例子就是简单的判断登录状态，若有其他的需求可根据官方文档自行更换配置。VueRouter官方文档

我们创建一个router.js文件，文件里面我们可以这样写：
 

//router.js文件
//const 路由名称 = () => import('对应你的文件路径')
import { createRouter, createWebHistory } from 'vue-router'
const Home = () => import('../views/home.vue');
const AboutView = () => import('../views/AboutView.vue');
const Msg = () => import('../views/msg.vue');
const AddAbout = () => import('../views/addabout.vue');
const Login = () => import('../views/login.vue');
const Persontable = () => import('../views/persontable.vue');
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      //  redirect: '/home',
      name: 'home',
      component: Home,
      children: [{
        path: '/about',
        name: 'about',
        component: AboutView,
        children: [{
          path: '/addabout',
          name: 'addabout',
          component: AddAbout,
        }]
      },{
        path: '/msg',
        name: 'msg',
        component: Msg,
      },{
        path: '/persontable',
        name: 'persontable',
        component: Persontable,
      }]
    },{
      path: '/login',
      name: 'login',
      component: Login,
    }
  ]
})

// 添加全局前置守卫，此处是对未登录时做了拦截，当用户未登录时路由跳转登录页面。若有其他情况，可自行设置。
router.beforeEach((to, from, next) => {
  const islogin = sessionStorage.getItem('token');
  if(!islogin){
    //未登录时，若访问登录页则放行，否则重定向到登录页
    next(to.name === 'login' ? true : {name: 'login'});
  }else{
    // 已登录时，若访问登录页则重定向到首页，否则放行
    console.log(from,to)
    next(to.name === 'login' ? { name: 'home' } : true);
  }
})

export default router

2.在main.js文件中，我们引入并且使用router.js文件。

这样，我们在项目中，路由懒加载的配置和路由守卫就完成了！