vue中beforeRouteEnter、beforeRouteLeave的应用场景

每个vue单文件组件中，可以加入三种route navigation guards（导航守卫钩子）：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave，比较常用的是beforeRouteEnter和beforeRouteLeave，这里总结下项目中遇到的应用场景。

beforeRouteEnter

比较常见的一种应用场景就是，当前页面是数据列表页并且开启了缓存，跳转到其他子页面再跳转回来时，需要根据不同的页面或参数来判断是否重新加载列表页的数据。有一种方法就是给列表页的路由配置meta字段——路由元，设置一个refresh属性，并在activated钩子里做对应处理。

{

path: "/bookList",

name: "bookList",

component: resolve => require(["@/views/book/List"], resolve),

navbarOption: "书籍列表",

meta: {

keepAlive: true, // 组件缓存

refresh: false // activated钩子触发时是否重新加载数据

}

},

代码中用到了sessionStorage、localStorage，但有时候走了一圈流程后需要重置数据，就可以在beforeRouteEnter或beforeRouteLeave处理这些缓存。有个项目用到了高德地图AMap，AMap插件在调用api时，会自动抓取当前页面路径作为参数appname的值，但有时候抓取的却是上一个页面的路径，而如果上一个页面的路径太长的话，这请求就直接413了。实际上，地图页面路径其实并不长，所以这里在渲染地图之前，刷新页面，这样AMap抓取的页面路径就是当前页面路径了。

注意，这里的needReload需要设置为js全局变量，如果放在vue的data里的话，会造成页面一直刷新，死循环。

beforeRouteLeave

离开本路由前需要重置样式。代码中用到了sessionStorage、localStorage，但有时候走了一圈流程后需要重置数据，就可以在beforeRouteEnter或beforeRouteLeave处理这些缓存。离开本路由前显示确认框：确认离开本页面。从本页面返回时，不是回到上一个页面，而是需要指定别的页面，那么就要在beforeRouteLeave方法里处理，最后一定要加上next();

代码