Points to be used: keepAlive built-in components in Vue + configuration issues in vue-router
1. Built-in components ---- keepAlive
Vue2 official document: https://v2.cn.vuejs.org/v2/api/#keep-alive
Vue3 official document: https://cn.vuejs.org/guide/built-ins/keep-alive.html
- Function: When switching between multiple components (pages), the content in the components (pages) can be cached, and there is a caching mechanism inside
- usage:
- Vue2 usage:
<!-- App.vue中 -->
<router-view v-else-if="isRouterAlive" v-slot="{ Component }">
<keep-alive :include="['App']">
<component :is="Component" />
</keep-alive>
</router-view>
- Vue3 usage:
<!-- App.vue中 -->
<template>
<div id="app">
<keep-alive >
<router-view></router-view>
</keep-alive>
</div>
</template>
internal caching mechanism
Components do not have a caching mechanism by default. As long as you switch to the next component, the current component will be destroyed. At this time, the current component can be destroyed by changing the built-in component. The internal caching mechanism:
- Cache all screens
<!-- App.vue中 -->
<template>
<div id="app">
<keep-alive >
<router-view></router-view>
</keep-alive>
</div>
</template>
- cache some pages
- Using the $route.meta property
<!-- App.vue中 -->
<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>
- or in vue-router:router.ts/js: ,
<!-- App.vue中 -->
{
path: '/basis/drps/department',
name: 'about',
component: () =>
import(
/* webpackChunkName: "ums-department" */ '@/views/user/department/about.vue' ),
meta: {
keepalive: true, //默认未false，若为true则表示该页面需要缓存
},
},
- In Vue2: there are include and exclude and max (how many components are cached at most)
<!-- include是包含 使用的是组件名（组件中的name非路由中的name）并非是路由的名字 此处只有Hello组件有缓存 -->
<keep-alive include="Hello">
<router-view></router-view>
</keep-alive>
<!-- exclude是不包含/排除 使用的是组件名（组件中的name非路由中的name）并非是路由的名字 此处只有Hello组件不被缓存 其他都能被缓存-->
<keep-alive exclude="Hello">
<router-view></router-view>
</keep-alive>
<!-- max最大 此处最多缓存10个组件-->
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
Hook function (life cycle) activated and deactivated
- Role: used to preserve component state or avoid re-rendering
- Rendering timing: enter created->mounted->activated for the first time, execute deactivated when exiting the current component, and only trigger activated when re-entering
- Note: The event is only executed once and placed in mounted, and executed every time it enters, it is placed in activated
<!-- activated：进入页面时执行->
activated(){
},
<!-- deactivated：退出页面时执行->
deactivated(){
},
Two, name attribute and value
Three uses of the name attribute:
- (1) Other components can be rendered by using the name attribute in a page:
<!-- about.vue -->
<router-view name = 'Hello'/> // 在about组件中渲染Hello组件
- (2) name can be used for routing parameters, and $router.name can be used to get the name value in the component:
<h1>{
{
$router.name}}</h1> // 渲染组件中name的值
- (3) Routing parameter passing: it can be used for params (query) parameter passing, params must use name, and query can use name or path:
<!-- params传参 1、声明式： router-link-->
//父路由组件
<router-link :to="/child/123">进入Child路由</router-link>
//子路由配置
{
path: '/child/:id',
component: Child
}
// 或者
{
path: '/child/:id',
name:"Child",
component: Child
}
<!-- params传参 2、编程/链式：this.$router.push-->
// 父路由使用编程式进行传参（通常使用事件触发）
this.$router.push({
path:'/child/${id}',
})
//子路由配置
{
path: '/child/:id',
component: Child
}
//子路由中可通过this.$route.params.id进行获取
<!-- query传参 1、声明式：-->
// 父路由组件中
<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获取到所传递的参数
The difference between query parameter passing and params parameter passing:
- Params pass parameters: only name can be used, path cannot be used, and the parameter name is not displayed in the address bar, but the value of the parameter exists
- Query parameters: both name and path can be used; when using path, the provided path value must be a relative path under the current root directory, not a relative path relative to the parent route, and the parameter name is displayed in the address bar. The format is: ?id=1345646&code=10212
There are two ways for components to introduce components in vue-router:
- (1) The introduction and alias form of components:
<!-- router.js/ts中 -->
import About from '@views/about/about.vue'
const aboutRouter = {
path: '/about',
name:'About', //此处的About必须与about.vue页面中的name值相同，否则即使配置了keepalive:true也无效
component: About,
meta: {
keepalive: true,
},
<!-- about.vue中 -->
export default defineComponent({
name: 'About', //当前页面的名字，namespace
...
});
- (2) Components are imported directly
const aboutRouter = {
path: '/about',
name:'About', //此处的About必须与about.vue页面中的name值相同，否则即使配置了keepalive:true也无效
component: () => import('@/views/about.vue'),
meta: {
keepalive: true,
},
<!-- about.vue中 -->
export default defineComponent({
name: 'About', //当前页面的名字，namespace
...
});
- (3) Summary: To keep the page from being refreshed repeatedly when tabs are switched: name in router.js/ts = component name/path = name in xx.vue page