系列文章目录:
[Vue]目录
老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU笔记在线版: https://note.youdao.com/s/5vP46EPC
视频:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
文章目录
- 前言
- 1. 缓存路由组件
- 2. 总结 缓存路由组件
- 3. activated()与deactivated()
默认情况下,进行路由的切换原来展示在页面上的组件会被销毁,新的组件会被挂载在页面上。由于每次通过路由切换组件,原来的组件都会被销毁,所以原来组件中的状态将不被保留,即每次展示在页面上的都是一个全新的被创建的组件实例对象。
App.vue
Vue Router Demo
About Home
About.vue
About组件
Home.vue
Home组件
News Message
News.vue
- news001
- news002
- news003
Message.vue
{{m.title}}
Detail.vue
- 消息编号: {{id}}
- 消息标题: {{title}}
router/index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'//创建并暴露一个路由器
export default new VueRouter({routes: [{name: 'about',path: '/about',component: About},{name: 'home',path: '/home',component: Home,children: [{name: 'news',path: 'news',component: News},{name: 'message',path: 'message',component: Message,children: [{name: 'messageDetail',path: 'detail',component: Detail,props($route) {return {id: $route.query.id,title: $route.query.title}},}]}]}]
})
如果需要在通过路由切换组件时,将原来的组件进行保留,使得在切换组件时原来的组件不被销毁,需要使用 keep-alive 标签将组件的展示区域的 router-view 标签进行包裹。
Home组件
News Message
默认情况下,如果只是单纯的使用 keep-alive 标签将 router-view 标签进行包裹,则展示在该区域的所有组件都将会被保留下来,不会被销毁。
如果需要指定保留的组件,则需要在 keep-alive 标签中使用 include 属性指定需要保留的组件,使用 include 属性之后只有指定的组件会被保留。
注意:include 属性中写的是组件名 name
如果需要指定保留多个组件不被销毁,使用属性绑定指令数组形式的写法:
作用:让不展示的路由组件保持挂载,不被销毁。
具体编码:
activated()与deactivated()是两个生命周期钩子(生命周期函数)。
activated()与deactivated()是路由组件所独有的两个生命周期钩子,用于捕获路由组件的激活状态。
activated路由组件被激活时触发。deactivated路由组件失活时触发。