vue3组合式api 路由中的组件的使用keep-alive详解以及router-view原理详解

已于 2023-06-27 20:38:13 修改
阅读量839 收藏
点赞数 2
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2023-06-27 19:03:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxh9231028/article/details/131423235
版权

当我们想对路由中的一些组件使用keep-alive进行包裹缓存时，有的人会写出下面的代码

然后并没有任何作用，于是就会有一种说法是，因为我们都知道keep-alive中只能包裹一个组件，所以有人会理所当然的认为他是因为其中的组件太多了，但其实这种说法并不对

因为router-view就是一个单独的组件，他的本质并不是使用url对应的组件代替他的位置，而是它的内部有一个插槽存在，当我们没有使用这个插槽时，他会默认的插入url对应的组件，所以其实url对应的组件并不是代替他的位置，而是作为他的子组件放入了插槽中，所以keep-alive没效果并不是因为组件太多，因为如果像动态组件一样，根据不同情况变成不同的组件，那么当变成组件名匹配的组件时，那么keep-alive反倒会生效，正式因为router-view从来没变过，所以我们包裹它不会有任何效果，而且对其内部的子组件没有任何意义，即使我们使用include属性，keep-alive也只是对router-view进行了缓存，而其内部的子组件，依旧不会有任何反应

那我们该如何对路由中的组件进行keep-alive的包裹呢？

当我们输入上面的代码是，会报出一个警告，如下图

这其实就是在提醒我们，使用router-view中的插槽完成keep-alive包裹，router-view中的插槽是作用域插槽，其内部向外传递了一个对象，对象内部包括了当前url对应的route对象，和组件实例对象，通过组件实例对象，我们就可以在自己的代码中实现组件的渲染，然后就可以轻松的写上keep-view，代码如下

组件命名在组合式api中不太容易，并且有多种方法，详情可以看我的另一篇文章vue3​​​​​​组合式api中 组件的命名方法详解

不止会JS
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue3 学习笔记--Vue Router
qq_42530623的博客
08-13 951
路由
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
12-07
在搭建 vue 项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化’，此时 便可以派上用场了。 可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。 PS： 与 相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。 1. keep-alive的基础使用 最基础的一般是结合动态组件去使用： <keep
VUE3路由缓存 router-view和keep-alive
weixin_41572561的博客
12-16 965
VUE3 路由缓存
Vue 3 中的 Keep-Alive 和路由跳转
最新发布
a1009698473的博客
04-17 504
在 Vue.js 中， 是一个内置的组件，可以使被包裹的组件保留状态，避免重新渲染。在某些情况下，我们可能希望在特定的路由跳转时关闭 keep-alive，例如从登录页面跳转到主页时。
vue <router-view />使用
weixin_30699741的博客
02-14 2279
在APP.vue主组件中，内容上就只有<router-view></router-view>，然后在其他页面也有<router-view></router-view>，可以理解为： 一层路径(/xxx)对应一个router-view 比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数) 那/a对应的就是App.vue中的...
Vue3 组合式 API
qq_40453972的博客
06-25 324
vue3入门
vue3中keep-alive和vue-router的结合使用
weixin_53068161的博客
05-21 8813
vue3中keep-alive和vue-router的结合使用前言代码一、为何要使用keep-alive？二、vue2中使用keep-alive将“router-view”组件包含于“keep-alive”即可三、vue3中使用keep-alive四、keep-alive属性“include，exclude”的使用。 前言 keep-alive：Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 router-view：vue-router内置组件， 如果直接包含在keep-alive里
详解Vue路由开启keep-alive时的注意点
01-19
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺...
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
vue3 router-view keep-alive Suspense transition 共同使用
qq_36287830的博客
07-27 1241
vue3 解决 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. router-view keep-alive Suspense transition
Vue—router-view组件使用方法
小破孩的博客
04-26 9052
今天在做Vue项目的时候，想做一个点击导航不跳转新页面的效果，只在本页面打开内容。于是就想到了router-view组件，但是具体怎么使用呢，现在来总结一下使用方法： 最主要的是router.js路由，写法如下： { path: '/', name: 'home', component: Home, redirect: '/index', ...
vue3:vue-router路由的使用，v-slot、动态添加、删除路由、路由导航守卫、登录守卫功能
米儿的博客
08-07 1万+
router-link的v-slot 在vue-router3.x的时候，router-link有一个tag属性，可以决定router-link到底渲染成什么元素： 但是在vue-router4.x开始，该属性被移除了； 而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容； v-slot如何使用呢？ 首先，我们需要使用custom表示我们整个元素要自定义 如果不写，那么自定义的内容会被包裹在一个 a 元素中； 其次...
【Vue3】router-view跳转渐变过渡
woodwhale的博客
04-11 5859
【Vue3】router-view跳转渐变过渡 前言 是否感觉使用element-ui-plus组件搭建的后台在router-view跳转页面的时候，内容部分出现的太过突兀？ 不妨试试transition过渡 1、transition无法包裹router-view？ 在Vue2的版本，如果想给router-view一个过渡渐变，可以将transition包裹在外面。 但是如今Vue3的版本，这样写会报错！ 如何改善这种情况呢？ 查询vue router官方文档发现可以这样写 <router-view
vue3 路由跳转&router-view
violetta521的博客
05-17 2659
路由跳转 router-link <router-link to="/login">去登陆</router-link> 点击事件跳转 <template> <button @click="goHome">去首页</button> </template> <script> export default{ methods:{ goHome(){ this.$r
vue3 组件，路由，KeepAlive
qiulei_21的专栏
04-28 335
共解决三个问题，详细参见文中所述。
vue3 keep-alive
langyalaoa的博客
08-27 292
<template> <router-view v-slot="{ Component }"> <keep-alive :include="includeList"> <component :is="Component"></component> </keep-alive> </router-view> </template> <script> export d.
keep-alive 和 router-view 的使用方法（Vue3）
weixin_46022934的博客
04-14 4127
一、router-view： 1. 常规使用方法 2. 非常规使用方法（插槽） 3. 非常规使用方法（结合keep-alive） 4. 命名路由👇🏻🔗（name字段） 二、keep-alive： 1. keep-alive解释如下： 2. keep-alive用法如下（贼简单）： 3. keep-alive对应的一些属性如下： 一、keep-aliv中的 include 和 exclude ①. include和exclude的含义 ②. 使用代码如下(exclude用法一致，含义不同)： 二、kee
Vue3的vue-router路由详解
热门推荐
月影WEB的博客
05-16 3万+
这篇文章是接着【三分钟快速搭建Vue3+webpack项目】的内容做的开发，有基础的可以跳过【三分钟快速搭建Vue3+webpack项目】，直接看以下的内容。 Vue3的vue-router路由详解： 首先安装路由依赖模块： npm install vue-router@4 所需代码文件如下图： 图1 所需要的主要文件：index.html、index.js、App.vue index.html：模板页面，项目中的代码编译之后都是放入到模板页面中id为app的元素这种。 代码如下：..
vue3 router-view 中使用keep-alive
09-16
在Vue3的router-view中使用keep-alive，你可以将<router-view>标签包裹在<keep-alive>标签中，以实现组件的缓存。这样当路由切换时，被包裹的组件将会被缓存起来，而不是被销毁。 下面是示例代码： ```html <keep-alive> <router-view></router-view> </keep-alive> ``` 在上述代码中，<keep-alive>标签将<router-view>标签包裹起来，以实现组件的缓存。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不止会JS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值