vue 中路由meta、懒加载

最新推荐文章于 2024-04-13 15:05:52 发布

李帅帅哦

最新推荐文章于 2024-04-13 15:05:52 发布

阅读量549

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue 中路由meta、懒加载

本文链接：https://blog.youkuaiyun.com/weixin_43151921/article/details/94623794

前端专栏收录该内容

73 篇文章

订阅专栏

本文介绍了Vue.js中实现懒加载的方法，通过在路由配置中使用动态导入来延迟组件加载，以及如何利用meta属性进行路由权限判断，确保只有符合条件的用户才能访问特定页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里面包含了两个需要知道的
一个是懒加载 就是 页面需要时就加载不需要时不加载
但是你必须要在路由中配置就是一句代码具体看下面的
页面加不加在怎么实现的懒加载和你半毛钱的关系都没有
你只需要再路由中这样写就ok了记得在路由中哦
meta在路由中一般都是充当权限判断的
啥意思
就是你的页面跳转时
有了meta 你就拿meta做判断
判断为true 就可以跳转到下一个路由
否则不让跳转怎么判断呢？？？
你要先写上meta 写了
再去别的地方搜索meta如何判断吧
涉及到路由守卫

尽量看一下我说的话吧

//懒加载
const PickUpAppointmentList = resolve => require(['@/views/BookingManagement/PickUpAppointmentList/PickUpAppointmentList'], resolve)
const PickUpLastPeo = resolve => require(['@/views/BookingManagement/PickUpLastPeo/PickUpLastPeo'], resolve)
const PickUpLoadManagement = resolve => require(['@/views/BookingManagement/PickUpLoadManagement/PickUpLoadManagement'], resolve)

export default [
  {
    path: '/PickUpAppointmentList',
    component: PickUpAppointmentList,
    meta: {id: 'REM010010', title: '接送预约名单'}
  },
  {
    path: '/PickUpLastPeo',
    component: PickUpLastPeo,
    meta: {id: 'REM020010', title: '接送剩余人数'}
  },
  {
    path: '/PickUpLoadManagement',
    component: PickUpLoadManagement,
    meta: {id: 'REM030010', title: '接送线路管理'}
  }
]