vue 按需加载,缓存,导航守卫

  开发中的注意事项:代码性能的优化

    1. 减少对第三方的依赖,降低耦合度

    2. 加强组件的重复利用率

    3. 按需加载

    4. 缓存 (尽量发送请求后保存数据)

    5. 开发过程中,尽量有着面向对象的思想,这个组件的方法尽量在这个组件上

  vuex   mit-ui   axios   better-scroll 还算是开发利器

  开发细节:文件细分, .vue 文件首字母大写,文件名保持字母小写

  alias:别名

  import Home from "@/components/Home.vue";

  import Find from "@/components/Find.vue";

  这种引入方式,会把组件中的 js 代码放在一个 js 文件中,看其中一个页面,相当于也把其他的组件 js 代码页加载了,项目太大,影响性能,我们需要按需加载,

  意思就是,打开 home 组件,只加载 home里的 js ,就不加载其他的组件中的 js 代码

  上面的代码,会将多个组件中的 js 代码放在一个 js 文件中

  let Home =()=> import("@/components/Home.vue");

  let Find =()=> import("@/components/Find.vue");

  这种写法就是路由的按需加载

  缓存:keep-alive

  html 的结构

    <keep-alive>

      <keep-view></keep-view>

    </keep-alive>

  在路由中的 router文件的 index.js 的写法为

  

  粘性定位:

    position:sticky

  meta 元信息

  导航守卫:让 title 的标签内容,随着我们的路由变化而变化

  配置路由中的时候,有个 meta 的属性,路由中的元信息

  设置组件中的元信息:

    

 

  在当前组件获取元信息:this.$route.meta  

  修改 title 标签中的内容:document.title = this.$route.meta.title

  和缓存的写法差不多

  导航守卫

    router 实例中提供了一个方法:beforeEach()

  在路由的跳转的时候,会触发这个事件

  router.beforeEach((to,from,next)=>{

   /* to:路由的配置信息,即将进入的路由

    from:路由的配置信息,当前导航离开的路由,第一次为 null

    next():是一个函数,必须调用,否则路由中断跳转

    */

   document.title = to.meta.title;

   next()  

  })

  注意事项:当我们进行子路由中的子路由的时候,我们的 title 的内容会显示为 undefined ,需要我们在 子路由中的子路由中 也要进行 meta 的配置

  exact 激活高亮 在 router-link 的组件上

  redirect :重定向,基本上是在父组件的定向子组件的内容

posted on 2019-08-16 17:03  Web引领者  阅读(479)  评论(0编辑  收藏  举报