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