Vue3 _ 24. Vue 路由缓存 & 编程式导航

一、路由缓存

我们在以后使用 Vue 做系统的时候，难免会遇到表单，填写完成后，不小心点错了按钮跳到了另外一个页面，当你再切回来的时候，你会发现整个表单啥也没有了。

再或者是一个比较大的页面，如果每次进来都要加载一边，那这个十分浪费服务器资源。为了避免上面的那两种情况，这里我们引入一种东西，叫路由缓存

二、路由缓存的使用

我们在 HelloRouter1.vue 中创建一个简单的 form 表单。

保存后我们来进行一次测试。

第一步：在两个input 框中随便输入点啥

第二步：现在切换到 router2

第三步：我们再切回来 router1

可以看到哈，这个已经什么都没有了。

接下来我们引入一下路由缓存（注意一下，Vue 2 和 Vue 3 的写法不一样了，不要瞎用）。连接：路由缓存使用

这里我们保存再去测试，可以发现，不管怎么切，这个 form 表单都是被缓存起来的

三、编程式路由

编程式路由其实就是不去使用它本身的 router-link，而是通过方法进行跳转。

来看他官网：https://next.router.vuejs.org/zh/guide/essentials/navigation.html

这里它给我们了两种方式，一种是：router.push，还有一种是：router.replace

区别：

使用 router.push 进行跳转的，可以向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

使用 router.replace 进行跳转的，不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

这里我们来使用一下。

先去弄两个方法，一个是使用 push 方式跳转，还有一个我们来用 replace 进行跳转。

这里我们再去修改一下上面的 router-link

保存，我们来试试看。

四、测试

我们这里来回点击两个 button，然后返回页面。

我们可以看到，这里是没有办法进行点击了。 

这一篇东西不多，自己动手练习一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~