一、路由缓存
我们在以后使用 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
最近网站已经做好,并且已经上线,欢迎各位留言~~