3.3全局导航守卫的补充
3.3.1全局后置钩子函数（router.afterEach）
在前面小节中使用的是全局前置钩子函数（router.beforeEach）来实现标签跟随URL的改变，但是还有一种就是后置钩子函数()
/*全局后置钩子函数*/
router.afterEach((to, from) => {
document.title = to.matched[0].meta.title;
})
使用后置全局钩子函数不需要再调用next();方法。
3.3.2其他守卫
（1）路由独享守卫
学习链接：导航守卫 | Vue Router
（2）组件内守卫
学习链接：导航守卫 | Vue Router
4、keep-alive遇见vue-router
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存︰
这样的话在调用组件的之后就不用每次都创建了，也就是说组件在创建完成之后不会自动销毁，可以提升性能。
4.1keep-alive的两个属性
include -字符串或正则表达，只有匹配的组件会被缓存
exclude -字符串或正则表达式，任何匹配的组件都不会被缓存
这样User组件和profile组件在使用时会被创建，当切换到其他的组件的时候会被销毁，如此循环往复。
5、小案例TabBar
(1)在终端使用脚手架创建项目tabbar
PS D:\Vue\vue06-router> vue init webpack tabbar
(2)因为App.vue组件是浏览器DOM的实例，因此首先会想到直接在App.vue组件中定义。
效果：
上面的代码都是写在App.vue文件中的，但是存在代码复用性差的问题，而且缺少图片的问题，因此要将TabBar组件抽取出来。
也就是需要将App.vue中的关于TabBar的组件抽取出来，又因为组件想要在浏览器上显示需要将组件挂载到vue实例，也就是App.vue上因此需要将TabBar.vue导入到App.vue中注册，并在App.vue中使用。
效果还是一样的。
除了有文字还需要加上图标，图标去找阿里的就行：iconfont-阿里巴巴矢量图标库
效果:
但是，根据组件化的思想，TabBar组件只是负责底部的导航栏，而底部的四个图标实际上也是一个的组件，因此我们将放在导航条中的图标封装到1个组件中，在导航条中使用就行了。
根据上图，TabBarItem组件中的内容（也就是图标不是写死的，可以根据我们的需要方便进行相关的修改和添加）是个插槽，TabBar组件中也是插槽，因为图标的数量和内容是可修改的。
TabBar组件内容
<template> <div id="tab-bar"> <slot></slot> </div> </template> <script> export default { name: "TabBar" } </script> <style scoped> /*设置文字排列在一行上,设置TabBar背景颜色为浅灰色,并将TabBar放到下面,设置TabBar顶部的阴影*/ #tab-bar{ display: flex; background-color: #f6f6f6; position: fixed; left: 0; right: 0; bottom: 0; box-shadow: 0 -1px 1px ,rgba(100,100,100,.2); } </style>
TabBarItem组件内容：
<template> <div class="tab-bar-item"> <!-- 具名插槽 --> <slot name="item-icon"></slot> <slot name="item-txt"></slot> </div> </template> <script> export default { name: "TabBarItem" } </script> <style scoped> .tab-bar-item{ flex: 1; text-align: center; height: 49px; } .tab-bar-item img{ width: 24px; height: 24px; } </style>
App组件内容：
<template> <div id="app"> <!-- 3、使用组件TabBar和TabBarItem组件--> <tab-bar> <tab-bar-item> <img slot="item-icon" src="./assets/img/tabbar/首页.svg" alt=""> <div slot="item-txt">首页</div> </tab-bar-item> <tab-bar-item> <img slot="item-icon" src="./assets/img/tabbar/分类.svg" alt=""> <div slot="item-txt">分类</div> </tab-bar-item> <tab-bar-item> <img slot="item-icon" src="./assets/img/tabbar/购物车.svg" alt=""> <div slot="item-txt">购物车</div> </tab-bar-item> <tab-bar-item> <img slot="item-icon" src="./assets/img/tabbar/我的.svg" alt=""> <div slot="item-txt">我的</div> </tab-bar-item> </tab-bar> </div> </template> <script> /*1、导入TabBar组件和TabBarItem组件注册到App.vue实例中并使用*/ import TabBar from "./components/tabbar/TabBar"; /*导入图标组件*/ import TabBarItem from "./components/tabbar/TabBarItem"; export default { name: 'App', components: { /*2、注册*/ TabBar, TabBarItem } } </script> <style> /*引入css样式*/ @import "./assets/css/base.css"; </style>
