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

转载于:https://www.cnblogs.com/shangjun6/p/11365040.html

vue 按需加载，换存，导航守卫相关推荐

Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...
vue按需加载组件-webpack require.ensure(转)
vue按需加载组件-webpack require.ensure 2017年07月28日 09:58:07 A_山水子农阅读数:23245 标签: vue按需加载组件按需加载webpackrequi ...
vue按需加载组件_微人事首页加载速度提高了 5 倍，我都做了什么？
「本文之前发过,但是比较零散,这里我把用到的方案都汇总一下,方便大家索引,有需要的小伙伴可以收藏下方便查找.里边提到的几种方案,大家都可以对照着视频试一下」 ElementUI 按需加载: 服务端开启 ...
vue-1.0-4.0/promis4.3异步请求/父子组件1.0/动态路由3.4/懒加载3.5/导航守卫3.7/-修改文件路径的引用问题......
1--------------------父子组件传递关系子组件:props:{ banners:{type:Array,default(){return[]}}} 父组件: 视口模式 npm in ...
vue router按需加载
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 4 Vue.use(Router); 5 //按需加载,当渲染其他页面时才加载其 ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
vue项目实现按需加载的3种方式
vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件用例: {path: '/promisedemo',name: 'Pr ...
vue 路由按需加载
在vue项目中,一般引入组件都是用import import 组件名 from '组件路径' webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非 ...
vscode vue解决跨域_Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async）...
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

vue 按需加载，换存，导航守卫

vue 按需加载，换存，导航守卫相关推荐

最新文章

热门文章