vue3浏览器后退前进不刷新页面
vue-router HTML5 History 模式 我一开始是这样配置的：在new VueRouter中只有一个routes的配置，并没有设置其他的东西，这个时候的浏览器的前进后退功能在第一次进去页面的时候是完全不能用的。
我们可以考虑利用框架iframe，第二个页面通过iframe引进来，但是注意他们可能是一个页面了，当你进入第二个也就是那个iframe框架的页面时，返回可能就是整体返回而忽视点餐的那个页面，因为把他们当整体啦。
问题：当在A页面第一点击按钮到B页面时，一切正常，当返回到A页面再次点击按钮时，B页面没有执行mounted钩子函数，结果导致mounted函数中查询方法不执行。
vue使用keep-alive实现页面前进刷新,后退缓存
1、具体使用参照vue.js官网 keep-alive使用 大家有没有想过使用keep-alive会存在这样的问题，当其他页面过来都会缓存，也就是不会执行组件的 mounted生命周期钩子 ，那这就麻烦大了，我们的很多初始化的东西都写在这个钩子里。
2、调整 router-view 定义一个isRouterAlive变量，用来刷新keep-alive；通过provide向下面子孙组件们暴露一个reload方法，用来刷新缓存。
3、keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。
4、A列表页面 --- 跳转到 --- B填写页面(填写了内容) --- 跳转到(B页面需要缓存) --- C选择单位页面再回到B页面，要显示 B页面之前填写的内容。用vue-router中的keepAlive设置为true是不可行的。
vue之路由传参,跳转,钩子函数
1、ps~ ： 确保要调用 next 方法，否则钩子就不会被 resolved。
2、导航表示路由正在发生改变，vue-router 提供的导航守卫主要用来：通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的， 单个路由独享的， 或者组件级的。注意：参数或查询的改变并不会触发进入/离开的导航守卫。
3、params是路由的一部分，必须要有。query是拼接在url后面的参数，没有也没关系。params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
vue3生命周期及生命周期函数(钩子函数)详解通俗易懂
Vue实例从创建到销毁的过程，就是生命周期。
Vue生命周期一共有11个钩子函数，图中一共有8个钩子函数。
unmounted - onUnmounted ，卸载组件实例后调用。
Vue-Router路由钩子函数(导航守卫)
1、其实，导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。
2、vue的路由守卫，也叫路由钩子、导航守卫或导航钩子。路由（vue-router） 提供的导航守卫主要用来：通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的，单个路由独享的， 或者组件级的。
3、正如其名， vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的， 单个路由独享的， 或者组件级的。记住 参数或查询的改变并不会触发进入/离开的导航守卫 。
4、既然有全局导航守卫，就会有相应的局部导航守卫。所谓局部，也就是指组件内的导航守卫了。
5、路由的导航守卫 又叫做路由的钩子函数（生命周期函数）就是在跳转页面的时候把路由栏下来，做一些操作在放行，vue一共提供了三种路由守卫。
6、vue组建级路由钩子函数介绍 路由钩子函数分为三种类型如下：第一种：全局钩子函数 。