不好意思，标题比较啰嗦，因为这次的流水账确实属于一个比较细节的小东西，下面详细讲： [b]1需求[/b] 最近在使用[url=https://simulatedgreg.gitbooks.io/electron-vue/content/cn/]electron-vue [/url]开发一个跨平台的桌面端软件，刚上手写了几个页面，遇到一个问题：桌面端软件通常会有导航需求，类似下图 [img]http://files.jb51.net/file_images/article/201709/2017911163757282.png?201781116387[/img] 导航按钮 点击返回按钮，返回上一页，并且显示上页内容。其实不止App，即使普通的网页中也会有此类需求，尤其是使用vue写SPA时。 项目中的导航几乎都是采用router.push({name: 'xxx', params: {xxx:123...}})这种方式。这种方式导致的一个直接问题是：当点击后退按钮(调用 router.go(-1))时，history中只保存了URL而丢失了params对象，进而导致依赖params的页面渲染异常。 [b]2 解决[/b] 其实思路很简单，既然是在后退操作中丢失了params，那么我们自然会想到：如何保存一下params！没错，就是这么粗暴，你既然要丢，我就把你保存一下！ 怎么存： 其实想都不用想这是一个跨组件通信问题拉，所以很自然的，用Vuex保存是最合乎常理的咯！ 什么时候存：第一反应，调用 router.push({name: 'xxx', params: {xxx:123...}})时保存，然后如果导航回到这个URL，如果没有params，尝试从vuex store里取。似乎没错，就是麻烦了点儿！！别慌，咱们有导航钩子 router.beforeEach((to, from, next) => { // ... }) 啊！ 正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。 说到这儿，你应该完全明白我的解决思路了，那下面废话就不多说了，上代码： 很简单吧！总共没有几行代码 O(∩_∩)O~ 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。