前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

前言

1. 缓存路由组件

2. 总结缓存路由组件

3. activated()与deactivated()

1. 缓存路由组件

默认情况下，进行路由的切换原来展示在页面上的组件会被销毁，新的组件会被挂载在页面上。由于每次通过路由切换组件，原来的组件都会被销毁，所以原来组件中的状态将不被保留，即每次展示在页面上的都是一个全新的被创建的组件实例对象。

App.vue

<template><div><!-- 使用子组件 --><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定当前路由对应组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>
// 导入子组件export default {name: 'App',
}
</script>

About.vue

<template><div><h2>About组件</h2></div>
</template><script>
export default {name: 'About'
}
</script><style></style>

Home.vue

<template><div><h2>Home组件</h2><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><div><router-view></router-view></div></div>
</template><script>
export default {name: 'Home'
}
</script><style>
</style>

News.vue

<template><div><ul><li>news001 <input type="text"></li><li>news002 <input type="text"></li><li>news003 <input type="text"></li></ul></div>
</template><script>
export default {name: 'News',beforeDestroy() {console.log('News组件即将被销毁...')}
}
</script><style>
</style>

Message.vue

<template><div><ul><li v-for="m in messageList" :key="m.id"><router-link :to="{name: 'messageDetail',query: {id: m.id,title: m.title}}">{{m.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template><script>
export default {name: 'Message',data() {return {messageList: [{ id: '001', title: '消息001' },{ id: '002', title: '消息002' },{ id: '003', title: '消息003' }]}},beforeDestroy() {console.log('Message组件即将被销毁...')}
}
</script><style>
</style>

Detail.vue

<template><div><ul><li>消息编号: {{id}}</li><li>消息标题: {{title}}</li></ul></div>
</template><script>
export default {name: 'Detail',props: ['id', 'title'],mounted() {console.log(this.$router)}
}
</script><style>
</style>

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 标签进行包裹。

<template><div><h2>Home组件</h2><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><div><!-- 展示在该区域的组件不会被销毁，会被保留 --><keep-alive><router-view></router-view></keep-alive></div></div>
</template>

默认情况下，如果只是单纯的使用 keep-alive 标签将 router-view 标签进行包裹，则展示在该区域的所有组件都将会被保留下来，不会被销毁。

如果需要指定保留的组件，则需要在 keep-alive 标签中使用 include 属性指定需要保留的组件，使用 include 属性之后只有指定的组件会被保留。

注意：include 属性中写的是组件名 name

    <div><keep-alive include="News"><router-view></router-view></keep-alive></div>

如果需要指定保留多个组件不被销毁，使用属性绑定指令数组形式的写法：
  <div><keep-alive :include="['News', 'Message']"><router-view></router-view></keep-alive></div>

2. 总结缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁。

具体编码：

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

3. activated()与deactivated()

activated()与deactivated()是两个生命周期钩子(生命周期函数)。

activated()与deactivated()是路由组件所独有的两个生命周期钩子，用于捕获路由组件的激活状态。

activated路由组件被激活时触发。
deactivated路由组件失活时触发。

[Vue]缓存路由组件 activated()与deactivated()相关推荐

vue——缓存路由组件
让不展示的路由组件保持挂载,不被销毁为了预防在使用同一个 <router-view></router-view> 的情况下,路由来回跳转导致之前写的数据会被清除,其实是路由跳 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
Vue缓存路由（keep-alive）以及新的生命周期
一.概念也就是说,kee-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 .也就是所谓的组件缓存 keep-alive 是 Vue 的内置组件,当它包裹动态组 ...
vue的路由组件的引入以及路由组件懒加载和router-link
App.vue <template><div><router-link to="/">首页</router-link><rou ...
VUE动态路由组件懒加载解决方案
项目场景: 将项目静态路由替换成动态路由,通过后台数据拿到路由配置信息动态加载问题描述: 小编将路由信息与系统菜单信息存在一起,当登录后拿到菜单信息后同时处理路由数据,过程肯定不是那么一帆风顺的,下 ...
Vue Router路由管理器
目录: 相关理解基本路由几个注意事项嵌套(多级)路由路由的query参数命名路由路由的params参数路由的props配置路由跳转的replace方法编程式路由导航缓存路由组件 a ...
项目前端（一）、vue项目中引入vue-router路由组件
1.在项目根目录下,执行 npm install vue-vouter 是否成功引入router路由组件,我们可以查看package.json文件中dependencies标签下是否有vue-rout ...
[vue] 怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢？
[vue] 怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢? 可以在路由meta中加入参数, 对打开的路由进行keep-alive的判断, 通过钩子active等个人简介我是歌谣,欢迎和 ...
vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
一.使用情景在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业 ...
VUE内置组件 vue使用插槽分发内容组件缓存实现动画的过渡效果
动态组件除了允许用户自定义组件之外,Vue还内置了一些组件,以帮助用户高效地开发一些功能.本章将带领大家一起来了解这些内置组件. 某些时候需要动态切换页面部分区域的视图,这个时候内置组件compon ...

[Vue]缓存路由组件 activated()与deactivated()

前言

文章目录

1. 缓存路由组件

2. 总结缓存路由组件

3. activated()与deactivated()

[Vue]缓存路由组件 activated()与deactivated()相关推荐

最新文章

热门文章

[Vue]缓存路由组件 activated()与deactivated()

前言

文章目录

1. 缓存路由组件

2. 总结 缓存路由组件

3. activated()与deactivated()

[Vue]缓存路由组件 activated()与deactivated()相关推荐

最新文章

热门文章

2. 总结缓存路由组件