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文件。
这样,我们在项目中,路由懒加载的配置和路由守卫就完成了!