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

    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 :重定向,基本上是在父组件的定向子组件的内容

vue 按需加载,缓存,导航守卫的更多相关文章

  1. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

  2. vue按需加载组件-webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...

  3. vue按需加载组件,异步组件

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template ...

  4. vue 按需加载

    vue 构建单页面应用,但是问题是随着系统的体积变大,js文件也体积太大了,这时候就需要按需要进行加载了 vue-router提供了懒加载的方式 const Foo = resolve => r ...

  5. 三步解决 vue 按需加载

    1  webpack 的 output 配置 chunkFleName 树干名称: " chunks/[name]-[chunkhash:8].js  " 这一步是配合第三步, 生 ...

  6. 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  7. vue中的懒加载和按需加载

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 ...

  8. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  9. 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

随机推荐

  1. java中的运算符与表达式

    运算符与表达式 运算符分类: 0.赋值运算符 = 1.算数运算符 + - * / % 2.比较运算符 < > == <= >= != 3.逻辑运算符 & | ! &am ...

  2. docker 批量删除含有同样名字的images

    docker rmi --force $(docker images | grep doss-api | awk '{print $3}') docker rmi  $(docker images | ...

  3. 微服务之Nacos配置中心源码解析(二)

    Nacos配置中心源码解析 源码入口 ConfigFactory.createConfigService ConfigService configService = NacosFactory.crea ...

  4. Oracle12cCDB和PDB数据库的启动与关闭说明

    在Oracle 12c中,分CDB 和PDB,他们的启动和关闭操作整理如下. 1 Container Database (CDB) 对于CDB,启动和关闭与之前传统的方式一样,具体语法如下: STAR ...

  5. windows控制台,cmd,命令提示符下的基础操作

    打开dos命令窗口1.win+r-->运行-->cmd 2.摁住shift+鼠标右击 选择 在此处打开命令窗口3.在磁盘某文件夹下,选择标题栏中输入框,输入cmd 回车 windows下常 ...

  6. qunee 缩略图

    <!DOCTYPE html> <html> <head> <title>Hello Qunee for HTML5</title> < ...

  7. 4.4. Item Pipeline管道文件

    0:Spider爬取数据 # -*- coding: utf-8 -*- import scrapy import sys from mySpider.items import ItcastItem ...

  8. runnerw.exe: CreateProcess failed with error 216 (no message available)

    看描述,创建进程失败,应该是main这个入口文件的问题. 检查包名.发现问题,IDE自动将包名导成了当前的目录名(模块) 上图两者不一致导致 解决: 修改包名为main 注:一个model下只能有一个 ...

  9. Django:报错 raise MigrationSchemaMissing("Unable to create the django_migrations table (%s)" % exc)

    Django 执行迁移生成表: python manage.py migrate 报错: raise MigrationSchemaMissing("Unable to create the ...

  10. tomcat不能处理图形

    https://blog.csdn.net/yfx000/article/details/86591945 不让java寻找linux图形界面即可,在java启动时加选项java -Djava.awt ...