300字范文 > 切换Tab页面不重复刷新页面/请求数据问题

切换Tab页面不重复刷新页面/请求数据问题

时间：2023-05-09 00:55:27

需用到的点：Vue中的keepAlive内置组件+vue-router中的配置问题

一、内置组件----keepAlive内部缓存机制钩子函数（生命周期）activated 和 deactivated 二、 name属性及值name属性的三种用途：query传参和params传参的区别：组件在vue-router中引入组件的2种方式：

一、内置组件----keepAlive

Vue2官方文档：https://v2./v2/api/#keep-alive

Vue3官方文档：/guide/built-ins/keep-alive.html

作用：当多个组件（页面）之间进行切换时可对组件（页面）中的内容进行缓存，其内部存在缓存机制用法： Vue2用法：

<router-view v-else-if="isRouterAlive" v-slot="{ Component }"><keep-alive :include="['App']"><component :is="Component" /></keep-alive></router-view>

Vue3用法：

<template><div id="app"><keep-alive ><router-view></router-view></keep-alive></div></template>

内部缓存机制

组件默认是不存在缓存机制的，只要切换到下一个组件就会销毁当前的组件，此时可通过改内置组件将当前的组件进行销毁，内部缓存机制：

缓存所有界面

<template><div id="app"><keep-alive ><router-view></router-view></keep-alive></div></template>

缓存部分页面使用$route.meta属性

<template><div id="app"><keep-alive ><router-view v-if="$route.meta.keepAlive"></router-view> //需缓存的组件或者自定义</keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view> //不需要缓存的组件</div></template>

或者在vue-router：router.ts/js中：,

{path: '/basis/drps/department',name: 'about',component: () =>import(/* webpackChunkName: "ums-department" */ '@/views/user/department/about.vue' ),meta: {keepalive: true, //默认未false，若为true则表示该页面需要缓存},},

在Vue2中：存在 include 和 exclude 及 max（最多缓存多少组件）

<keep-alive include="Hello"><router-view></router-view></keep-alive>

<keep-alive exclude="Hello"><router-view></router-view></keep-alive>

<keep-alive :max="10"><component :is="view"></component></keep-alive>

钩子函数（生命周期）activated 和 deactivated

作用：用于保留组件状态或者是避免重新渲染渲染时机：首次进入created->mounted->activated，退出当前组件时执行deactivated，再进入只触发activated注意：事件只执行一次放在mounted中，每次进入都执行则放在activated中

<!-- activated：进入页面时执行->activated(){},

<!-- deactivated：退出页面时执行->deactivated(){},

二、 name属性及值

name属性的三种用途：

（1）可通过name属性在一个页面中的使用渲染其他组件：

<router-view name = 'Hello'/> // 在about组件中渲染Hello组件

（2）name可进行路由传参，可使用$router.name获取组件中的name值：

<h1>{{$router.name}}</h1> // 渲染组件中name的值

（3）路由的传参：可用于params（query）传参，params必须使用name，而query可使用name或者path：

//父路由组件<router-link :to="/child/123">进入Child路由</router-link>//子路由配置{path: '/child/:id',component: Child}// 或者{path: '/child/:id',name:"Child",component: Child}

// 父路由使用编程式进行传参（通常使用事件触发）this.$router.push({path:'/child/${id}',})//子路由配置{path: '/child/:id',component: Child}//子路由中可通过this.$route.params.id进行获取

// 父路由组件中<router-link :to="{name:'Child',query:{id:134565}}">进入到Child路由中</router-link>// 子路由配置{path: '/child,name: 'Child',component: Child}

// 父路由通过编程式传参(通常是通过事件进行触发)this.$router.push({name:'Child',query:{id:123}})// 子路由配置{path: '/child,name: 'Child',component: Child}//子路由中可通过this.$route.query.id获取到所传递的参数

query传参和params传参的区别：

params传参：只能用 name，不能用 path，且地址栏中不显示参数名，但是存在参数的值query传参：name 和 path 都可以用；使用 path 的时，所提供的 path 值必须是当前根目录下的相对路径，而不是相对于父路由的相对路径，且地址栏中显示参数名，其格式为：?id=1345646&code=10212

组件在vue-router中引入组件的2种方式：

（1）组件的引入及起别名形式：

import About from '@views/about/about.vue'const aboutRouter = {path: '/about',name:'About', //此处的About必须与about.vue页面中的name值相同，否则即使配置了keepalive:true也无效component: About,meta: {keepalive: true,},

export default defineComponent({name: 'About', //当前页面的名字，namespace...});

（2）组件直接引入

const aboutRouter = {path: '/about',name:'About', //此处的About必须与about.vue页面中的name值相同，否则即使配置了keepalive:true也无效component: () => import('@/views/about.vue'),meta: {keepalive: true,},

export default defineComponent({name: 'About', //当前页面的名字，namespace...});

（3）总结：若要保持Tab进行切换时页面不重复进行刷新：需router.js/ts中的name = component的名字/路径 = xx.vue页面中的name

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。