vue3中keep-alive和vue-router的结合使用方式

目录
  • 前言
  • 代码
  • 一、为何要使用keep-alive？
  • 二、vue2中使用keep-alive
  • 三、vue3中使用keep-alive
  • 四、keep-alive属性“include，exclude”的使用

前言

  • keep-alive：Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
  • router-view：vue-router内置组件， 如果直接包含在keep-alive里面，所有路径匹配到的组件都会被缓存。

提示：以下是本篇文章正文内容，下面案例可供参考

代码

Hmoe组件：

<template>
  <div class="home">
    <input type="text" name="" id="">
  </div>
</template>
<script>
export default {
  name: 'Home',
  components: {},
  created() {
    console.log('Home被创建');
  },
  unmounted() {
    console.log('Home被销毁');
  }
}
</script>

About组件：

<template>
  <div class="about">
    <input type="text">
  </div>
</template>
<script>
export default {
  name: 'About',
  components: {},
  created() {
    console.log('About被创建');
  },
  unmounted() {
    console.log('About被销毁');
  }
}
</script>

路由代码：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

一、为何要使用keep-alive？

当路由切换时想要达到页面不重新缓存，避免组件被销毁时即可使用keep-alive来实现。

例如：

此时切换到“About”组件后“Home”逐渐将会被销毁，

再切换回“Home”组件时输入框内信息已经被重新渲染消去。

为避免组件重新渲染所以使用“keep-alive”。

二、vue2中使用keep-alive

将“router-view”组件包含于“keep-alive”即可

<keep-alive>
      <router-view />
</keep-alive>

此时组件将保留状态，或避免重新渲染。

三、vue3中使用keep-alive

vue3的keep-alive应用相对于vue2有所变化，此处描述vue3时如何使用，详情可见：Vue Router文档

使

<keep-alive>
      <router-view />
</keep-alive>

改变为如下代码，

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

即可。

四、keep-alive属性“include，exclude”的使用

注意：使用include，exclude 属性需要给所有vue类的name赋值，否则 include，exclude将不生效

  • include 值为字符串或者正则表达式匹配的组件name不会被销毁。
  • exclude 值为字符串或正则表达式匹配的组件name会被销毁。

如，修改路由代码为：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view v-slot="{ Component }">
    <transition>
    //About组件将会被销毁，而Home组件则不会
      <keep-alive exclude="About">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

例如：

进入页面

切换路由至“About”

“Home”组件未被销毁，再切换路由至“Home”

“About”组件被销毁

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在移动端使用vue-router和keep-alive的方法示例

    对于web开发和移动端开发,两者在路由上的处理是不同的.对于移动端来说,页面的路由是相当于栈的结构的.vue-router与keep-alive提供的路由体验与移动端是有一定差别的,因此常常开发微信公众号的我想通过一些尝试来将两者的体验拉近一些. 目标 问题 首先一个问题是keep-alive的行为.我们可以通过keep-alive来保存页面状态,但这样的行为对于类似于APP的体验是有些奇怪的.例如我们的应用有首页.列表页.详情页3个页面,当我们从列表页进入详情页再返回,此时列表页应当是keep

  • Vue 内置组件keep-alive的使用示例

    目录 一.keep-alive 用法 使用示例: 1.缓存所有页面: 2.根据条件缓存部分页面 3.结合vue-router,缓存部分页面 二.keep-alive 生命周期 1. activated 2. deactivated keep-alive 是Vue内置的组件之一, 主要用于保留组件状态或避免重新渲染. 作用    在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验. 一.keep-alive 用法 < keep-alive> 包裹动态组件

  • keep-Alive搭配vue-router实现缓存页面效果的示例代码

    Vue工程中有些页面需要有缓存.这个功能通过keep-alive组件实现,keep-alive组件可以使被包含的组件保留状态,或避免重新渲染. 在routes.js中定义路由,在路由中定义元信息(meta字段),需要缓存的页面就需要在meta对象中定义一个字段,这里设置为keepAlive,设置为true,反之,则不缓存. { path: '/a', component: () => import('@/pages/A'), meta: { title:'A', keepAlive: true

  • vue3缓存页面keep-alive及路由统一处理详解

    vue3缓存页面keep-alive及路由统一处理详解

    目录 一.前言 二.使用 1.vue2和vue3的不同 2.页面某些数据不需要缓存 3.动态设置keepAlive属性 4.使用include,exclude配置需要缓存的组件 5.部分页面过来需要缓存,部分页面过来需要刷新 6.缓存只在一级路由生效 总结 一.前言 当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存的页面里面有部分内容不缓存,总之各种情况,下面就列举其中一些例子 vue2和vue3的使用方式是不一

  • Vue3实战学习配置使用vue router路由步骤示例

    Vue3实战学习配置使用vue router路由步骤示例

    目录 引言 一.目录结构 二.版本依赖 三.配置路由 四.使用路由 引言 随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-router在Vue3中的配置和使用. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ views/ home.vue list.vue ro

  • vue router 动态路由清除方式

    目录 router 动态路由清除 vue-router退出登录清空路由 router 动态路由清除 重置matcher可达到路由还原效果 在用户退出时调用 resetRouter(router) 即可还原路由 import Vue from 'vue' import Router from 'vue-router' import { constantRouterMap } from '...' //导入初始化router   // 传入当前router export function reset

  • Vue3中的极致防抖/节流详解(附常见方式防抖/节流)

    目录 前言 防抖或节流原理 防抖(debounce) 示例代码 使用 节流(throttle ) 示例代码 使用 环境说明 新封装 防抖(debounce) 常见封装-1 常见封装-2 新封装 使用 节流(throttle) 常见封装-1 常见封装-2 新封装 总结 前言 今天给大家带来的是Vue 3 中的极致防抖/节流(含常见方式防抖/节流)这篇文章,文章中不仅会讲述原来使用的防抖或节流方式,还会带来新的一种封装方式,使用起来更简单.更清晰. 在前端的开发过程中,在涉及到与用户交互的过程中是基

  • 如何在Vue 3中扩展Vue Router链接详解

    如何在Vue 3中扩展Vue Router链接详解

    前言 <router-link> 标签是一个很好的工具,可以在你的Vue应用程序的不同页面之间进行导航,但当导航到一个外部链接时,它不是一个工具,为此,你应该使用一个普通的<a> 标签.也许这只是我的问题,但很多时候,我都懒得去理会这其中的差别.其他时候,链接可能是动态的,也就是说,来自数据库或一些用户提供的数据源.在这种情况下,你根本不知道这个链接是外部的还是内部的,而且在每个可能使用这个链接的地方手动做V-if是多么痛苦的事情. 如果只是用一个单一的组件来处理所有的内部和外部链

  • vue3中router路由以及vuex的store使用解析

    目录 vue3 router路由及vuex store使用 1.路由 2.vuex vue3中router路由和vuex的store使用,获取对象基本使用 vue3中router和store使用方法 1.企业开发Router全局配置 2.企业开发Store全局配置 功能快捷键 vue3 router路由及vuex store使用 1.路由 <script> import { useRouter, useRoute } from 'vue-router' export default {   s

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate

  • Vue Router去掉url中默认的锚点#

    Vue Router去掉url中默认的锚点#

    hash模式url vue-router默认hash模式--使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载. 如果不想要这种默认的hash模式,可以用路由的history模式,这种模式充分的利用history.pushState API来完成URL跳转而无需重新加载页面. index.js Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path:"/xxx&quo

  • Vue Router中应用中间件的方法

    中间件是我们在软件开发中的一个古老而强大的概念,当我们在应用程序中使用路由相关模式时,它非常有用. 如果您不太了解中间件的含义,Nodejs框架Express里的中间件可以帮助您了解它们的工作原理. 但是,中间件仅适用于后端吗? 不,当应用程序中有路由时,中间件在前端或后端中就会非常常见.比如现在流行的单页应用程序. 有一些示例可以说明,何时可以使用中间件: 不允许未登录用户访问您的网页. 仅允许某些类型的用户查看页面(角色:管理员,作者等) 数据采集. 重置设置或清理存储空间. 限制访问用户的

  • Vue3中的模板语法和vue指令

    目录 1 模板插值语法 2 指令 1 模板插值语法 在script 声明一个变量可以直接在template 使用用法为{{变量名称}} 模板语法是可以编写条件运算的 运算也是支持的 操作API 也是支持的 <template> {{ message }} {{ message2==0 ? '我是老大' : '我笑的' }} {{ message2 + 1 }} {{ message.split('').map(v => `4546$v`) }} </template> <

  • vue3中vue.config.js配置及注释详解

    vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

随机推荐