#### 前言：vue在不使用keep-alive功能的情况下，页面返回不能保留他的位置 # :-: **初解** > 文档[vue-router](https://router.vuejs.org/zh/) 中导航守卫意在router切换前和router切换后进行代码操作 > **beforeEach**：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守resolve 完 **之前** 一直处于 等待中。 > **afterEach**：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守resolve 完 **之后** 一直处于 等待中。 # :-: **正文** > 思路：在router文件中创建meta储存position（距离顶部位置），通过导航守卫 beforeEach（之前） 保存位置，通过 afterEach（之后） 移动位置 ``` //router.js const ce = resolve => require(["@/views/ce"], resolve); {path: 'ce',name: ce',meta: {position:0},component: ce} ``` > 注意beforeEach与afterEach的参数（to,from）含义不同 ``` //main.js /*记录方法*/ router.beforeEach((to, from, next) => { let position = window.scrollY if (position == null) position = 0 from.meta.position = position next() }); /*页面进入移动距离*/ router.afterEach((to, from, next) => { let position = to.meta.position if(position>=0){ Vue.nextTick(() => { window.scrollTo(0, position); }); }else{ window.scrollTo(0, 0); } }); ``` # :-: **功能加强** > 相信同学都发现了，上述代码不管什么页面只要router的meta记录位置都会返回上一页保存位置这对于业务来说不是很合理 > 我们修改一下router.js,增加meta属性positionsrue，通过判断positionsrue进行选择是否跳转 ``` //router.js const ce = resolve => require(["@/views/ce"], resolve); {path: 'ce',name: ce',meta: {position:0,positionsure:true},component: ce} ``` > 并且修改一下main.js的afterEach ``` router.afterEach((to, from, next) => { let position = to.meta.position let positionsure = to.meta.positionsure if(position>=0&&positionsure){ Vue.nextTick(() => { window.scrollTo(0, position); }); }else{ window.scrollTo(0, 0); } }); ```