vue3 实现routerview缓存

最新推荐文章于 2024-07-06 11:09:10 发布

青青子衿~~

最新推荐文章于 2024-07-06 11:09:10 发布

阅读量504

点赞数

分类专栏：前端 vue3 缓存文章标签：前端框架 vue.js 前端

本文链接：https://blog.csdn.net/weixin_45727272/article/details/130821544

版权

前端同时被 3 个专栏收录

54 篇文章 2 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

缓存

1 篇文章 0 订阅

订阅专栏

这段代码展示了在Vue路由器中如何使用<router-view>配合<keep-alive>进行组件缓存，特别是当include属性设置为home时，home组件将在切换时不被重新渲染，提高应用性能。include值可以是多个组件名，用逗号分隔。

摘要由CSDN通过智能技术生成

直接上代码

<router-view v-slot="{Component}">
    
    <keep-alive include="home">

      <component :is="Component" :key="$route.path" />

    </keep-alive>

  </router-view>

include 中是要缓存的组件名称，字符串类型，如有多少个 ' , '逗号分隔

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

青青子衿~~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue3的keepalive页面缓存

newbodyheart的博客

07-19

1521

vue3 keepAlive

vue 结合vuex动态改变routerview

moo611的博客

08-29

675

keep alive 里面有一个inclue属性，可以支持动态配置，需要做缓存的页面的name,用逗号隔开，拼接成字符串。情形一：单一列表页->详情页，返回的时候列表页保持不变。这种情况只需要在列表页的父级，指定列表页为keep-alive即可。具体代码如下 home.vue <keep-alive :include="cached"> <router-view class="routerview"></router-view> </keep-al

参与评论您还未登录，请先登录后发表或查看评论

深入理解与使用keep-alive(配合router-view缓存整个路由页面)

12-07

在搭建 vue 项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化’，此时便可以派上用场了。可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。 PS：与相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。 1. keep-alive的基础使用最基础的一般是结合动态组件去使用： <keep

vue3 给缓存组件

weixin_43136717的博客

11-02

630

vue 缓存组件

Vue3 对跳转同一路由传入不同参数的页面分别进行缓存

最新发布

qq_43225508的博客

07-06

1120

watch 监听对于route.query 是否存在catchName 参数的路由分别进行缓存。path: '/myRouter/detail', // 路径。从列表页跳转至不同的详情页面，对这些详情页面分别进行缓存。keepAlive: true, // 是否被缓存。在路由文件里对需要进行缓存的路由对象添加meta 属性。-- 有条件的进行缓存 -->// 需要缓存的详情页面路由。

vue3 路由缓存问题（三种方法）

团酱

08-17

4869

vue3路由缓存：当用户从/users/johnny导航到/users/jolyne时，相同的组件实例被重复使用。由于两个路由都渲染相同的组件，比起销毁再创建，复用是比较高效的，但是这也会导致组件的生命周期狗子不会被调用根据小仙兔项目进行代码编辑。

vue 路由缓存

shidouyu的专栏

12-12

1496

使用两个 router-view 标签分别作为缓存和不缓存的路由出口在路由配置的时候只需要给要缓存的页面加上 meta 属性然后添加 keepAlive 属性设置为 true 即可。同样直接用 keep-alive 标签包裹 router-view 标签然后使用 include 指定需要缓存的页面的 name 名称。直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了。注意是缓存页面的 name 名称而不是缓存页面路由的 name 名称。

Vue3除了keep-alive，还有哪些页面缓存的实现方案

chengbo_eva的博客

07-22

827

Vue3除了keep-alive，还有哪些页面缓存的实现方案

Vue3路由缓存问题解决

rqz__的博客

05-17

1342

使用带有参数的路由时需要注意的是，当用户从/users/johnny导航到/users/jolyne时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

vue3 +ts+vue-i18n中英文切换

qq_42859450的博客

09-29

1250

中英文切换

vue组件 keep-alive 和 transition 使用详解

10-16

2. **`transition`组件**：`transition`主要用于实现Vue组件的过渡效果。它可以是CSS过渡、CSS动画或JavaScript钩子函数。`transition`不会渲染额外的DOM元素，仅对包裹的内容应用过渡效果。例如： ```html ...

_vue-3

beifeng11996的博客

02-26

527

1. 哪些变化从上图中，我们可以概览的新特性，如下：1.1 速度更快相比1.2 体积更小通过的功能，可以将无用模块“剪辑”，仅打包需要的能够，有两大好处：可以开发出更多其他的功能，而不必担忧打包出来的整体体积过多1.3 更易维护compositon Api更好的Typescript支持是基于编写的，可以享受到自动的类型定义提示1.4 编译器重写1.5 更接近原生可以自定义渲染 API1.6 更易使用响应式暴露出来轻松识别组件重新渲染原因2. Vue3新增特性Vue 3 中需要关注的一些新功能包括：2.1

Vue 使用＜keep-alive include＞实现多级＜router-view＞缓存，无限层次缓存

热门推荐

cimo的博客

11-09

1万+

使用 <keep-alive> 实现缓存目前主流的有两种方法方法一：在路由元信息中添加缓存标识： { path: 'json', name: 'json', meta: { ... keepAlive: true ... }, component: () => import('../views/components/json') }, 使用 v-if 判断是否缓存 <keep-alive> <router-v

Vue路由组件缓存

YJH15888673903的博客

05-11

111

Vue缓存路由组件

Vue3项目解决路由缓存问题---让组件实例不复用，强制销毁重建

听海边涛声

05-28

517

Vue3项目解决路由缓存问题---让组件实例不复用，强制销毁重建

Vue 使用＜keep-alive include＞实现多级＜router-view＞缓存，无限层次缓存_keepalive include

2401_84418883的博客

05-16

506

但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。// 如果没有按需加载完成则等待加载。

vue2中使用keep-alive缓存router-view组件的3种方法

yhlhelloworld的博客

03-30

6267

首先先了解一下什么是keep-alive keep-alive:vue内置组件，包括不活动的实例;dom结构移除了；但是组件的实例没有被销毁；而是缓存起来了；注意：缓存的是组件的实例 1. 包括组件 2. 包括路由的坑 router-view 它有3个属性分别是： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。...

Vue Router 路由动态缓存组件

猫老板的豆

04-13

2567

Vue Router 允许你缓存路由组件，这样在用户导航回之前的页面时，组件的状态会被保留而不是重新渲染。这可以通过使用组件来实现。是一个内置抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。它的主要作用是缓存不活动的组件实例，而不是销毁它们。当组件在包裹下被切换时，它的状态（包括数据、DOM 结构等）都会被保留，以便在下次重新显示时能够恢复之前的状态，而不是重新创建组件实例。根据路由的meta字段中的keepAlive属性来决定是否缓存组件。

解决路由缓存问题 vue3

grow_的博客

01-04

1068

现存问题：由于路由的组件复用机制，当路由的路径path没有发生变化时，路由对应的组件会被直接复用，也就是生命周期钩子函数不再执行，请求也就不会再次发起。说明❓：根据不一样的场景要求使用不一样的技术方案，如果性能要求很高，第三种方案，如果不涉及性能问题，使用key简单粗暴，1）给`router-view` 添加key属性 ----------- `Layout/index.vue`> 解决思路：给`router-view` 加上key 值为每次路由切换的完整路径。说明❓：组件会被重新创建。

vue3routerview

09-10

Vue 3 中没有 `RouterView` 组件，它是 Vue Router 2.x 版本中的一个特殊组件。然而，Vue 3 中仍然可以使用 `RouterView` 组件，但需要安装和引入 Vue Router 4.x 版本。要在 Vue 3 中使用 `RouterView` 组件，首先确保已经安装了 Vue Router 4.x 版本。然后，在你的根组件中，使用 `createRouter` 函数创建路由实例，并使用 `createApp` 函数创建应用实例。在应用实例上使用 `use` 方法来安装路由实例。最后，在模板中使用 `<router-view>` 标签来渲染匹配到的组件。以下是一个使用 Vue 3 和 Vue Router 4.x 的示例代码： ```javascript import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' // 导入你的组件 import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) const app = createApp(App) app.use(router) app.mount('#app') ``` 然后，在你的根组件模板中，使用 `<router-view>` 标签来渲染匹配到的组件： ```html <template> <div id="app"> <router-view></router-view> </div> </template> ``` 这样，在不同的路由路径下，`<router-view>` 标签将会渲染对应的组件。