常规操作：
我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用。
但是我们知道，不管是我们刚进入这个页面还是从其他页面返回这个页面，这些生命周期都会走一遍。
问题：
所以，即使你跳转到下级页面选好你所需的数据返回上一页时，你所回填的数据又被从接口请求回来的数据给覆盖了。。。，这并不是我们想要的效果！！！
使用keep-alive
不想让页面加载数据？？？当然可以，这时候==Keep-alive==登场了
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗
1、缓存所有页面
如果你想缓存所有的页面，只需要修改下app.vue中的代码即可
// app.vue<template><div id="app"><keep-alive ><router-view></router-view></keep-alive><tabBar/></div></template>
2、缓存部分页面
如果你想缓存部分页面，有两种方式：
(1)使用router.meta属性
app.vue
// app.vue<template><div id="app"><keep-alive ><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view><tabBar/></div></template>
router.js
{path: '/usermanage',name: 'usermanage',meta: {keepAlive: true, //该字段表示该页面需要缓存},component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载},
三、activated配合keep-alive
首先，我们需要使用router.meta属性，修改需要缓存的组件路由如下
// keepAlive和isback这两个很重要！{path: '/usermanage',name: 'usermanage',meta: {keepAlive: true, //该字段表示该页面需要缓存isBack: false, //用于判断上一个页面是哪个title: '人员管理'},component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载},
然后修改需要缓存的组件中的代码(只放重点部分)：
<script>export default {name: 'currentName',data() {return {isFirstEnter: false, //}},beforeRouteEnter(to, from, next) {if (from.name == 'nextName') { // 这个name是下一级页面的路由name to.meta.isBack = true; // 设置为true说明你是返回到这个页面，而不是通过跳转从其他页面进入到这个页面}next()},mounted() {},activated() {if (!this.$route.meta.isBack || this.isFirstEnter) {this.initData() // 这里许要初始化dada()中的数据this.getDataFn() // 这里发起数据请求，（之前是放在created或者mounted中，现在只需要放在这里就好了，不需要再在created或者mounted中请求！！）}this.$route.meta.isBack = false //请求完后进行初始化this.isFirstEnter = false;//请求完后进行初始化 },}</script>
大功告成
这样就实现了：从其他页面跳转到这个页面时会请求数据，当从下级页面返回这个页面时就不会重新请求数据
感谢阅读
如有问题，欢迎留言指出，一起学习，一起进步
