vue项目总结——公共路由与导航守卫

时间:2024-03-27 12:37:21

以前vue框架做的项目,因为前期的配置工作是别人写好的,就直接拿来用,现在整理一下。

1.路由的配置是在router文件夹下的js文件,项目中经常有一些公共的页面,比如错误页面、空白页面等,就需要有一个公共路由配置文件。

vue项目总结——公共路由与导航守卫

然后在需要的路由配置文件引入公共路由

vue项目总结——公共路由与导航守卫

2.导航守卫:路由跳转前做一些验证,比如登录验证(未登录去登录页,已登录的去首页),路由匹配不到去错误页面等

vue项目总结——公共路由与导航守卫 

好了,完成。

3.上面还有一个路由懒加载:

const errorPage = () => import('@/components/common/errorPage')

路由懒加载也就是把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。可以做为vue首屏加载慢的优化方法之一。