教程（一）：在写插件前考虑的一二三点。

背景

接触Vue算是比较久了，平时项目里主要是数据处理以及各种组件的调度。深的东西有，但是比较重复。如何跳出这种舒适区提升自己的技能，算是摆在每个程序员面前的一道坎。
教程为不长的系列教程，从零开始写一个navigator插件，干货应该还是有。

需求分析

需求1:

在实践中遇到这样的场景，一个多页面多层次的应用，路由管理是比较麻烦的。页面A携带参数调转页面B（页面B需要携带的参数进行异步操作），再跳转页面C。如果页面C回退到页面B，B该如何处理？
直接方法是使用router.go(-1) -- ( router.back())为类似原理。go的实质是在history的heap上跳转，当go到达某一页时，该页面会重新回到初始生命周期，即如果存在created,mounted钩子函数，将会重新调用。那么从页面C回退到页面B时，怎么实现重新获取A传递的参数呢？

列出以下可行方案：

（1）动态路由匹配：

页面A跳转页面B时，通过设置router {path:'/b/:id'}方式跳转。
这里id就是传递的参数,go(-1)可以回退，使用this.$route.params获取参数。

（2）使用query拼接url:

页面A跳转页面B时，使用router.push({ path: 'b', query: { id: '3' }})。
路径变成 /b?id=3。这样回退后，页面通过this.$route.query获取参数

以下几点值得注意：

使用router({name,params})时，params只能和name搭配使用。router({path,params})是错误的。可行的匹配方式还有router({name,params,query})，router({path,query})

在测试时发现一个有趣的现象:如果页面B的router设置为动态匹配：{path:'/d/:id'},页面A跳转页面B时，假如页面A当前router的params为{id:3}（这个可能是由页面C、D获得）；携带参数为{name:'b',params:{test:2}}跳转到页面B后，页面B的router.params为{id:3,test:2},此时，页面B的路径为/b/3。（页面A的router.params.id在跳转到页面B时被自动合并到了页面B里面）
如果修改上述页面B的router设置{path:'/d/:idtest'},其他保持不变，再进行测试，可以发现B页面的路径变为了跟目录·\·,而在该页面想再次跳转会报错。
这是一个比较奇特的现象，感觉是一个疑似bug,后续有时间会再次进行测试。

上述方案基本思路是通过当前页面url获取需要的参数，然后进行渲染。那么有没有其他可行的方案呢？

能想到的骚操作有：

运用vuex进行中心管理，在页面跳转离开后记录当前页面需要的参数，当路由再次回退到该页面时，从vuex获取该参数进行渲染。

既然用了vuex,同样的思路通过localstorage储存相应参数。

弄这么麻烦干什么，页面B跳转页面C时，把A传递的参数传递给C，然后等C回退B时，再把参数传回来！！！！！别这么干，疯了。

以上就是目前想到的一些方法，如果有其他方案，欢迎大家一起探讨。

需求2:

既然说到回退机制，那么项目中的缓存机制也需要考虑。排除将页面数据整个静态化储存方案，可行的方法是使用keep-alive。 教程一般都是讲如何将页面状态进行缓存，但是如何将缓存清空呢？不可能遇到的页面都缓存起来吧。

以上就是我的插件需要解决的问题，后续教程将继续研究如何一步步解决问题实现功能。希望大家多多关注