#### 嵌套路由
案例：首页会有多个标签页组成，且保持底部不变
1. 页面配置
```
<div class="coomarts_index">
<keep-alive>
<router-view></router-view>
</keep-alive>
<HomeFooter/>
</div>
```
2. 路由配置
```
path:'/',
redirect:{
path:'/IndexHome/Home',
}
},
{ path: '/IndexHome', component: IndexHome,
children: [
{
path: 'Home',
component: Home
},
{
path:'Cart',
component:Cart,
},
{
path:'UserCenter',
component:UserCenter,
},
{
path:'Discover',
component:Discover,
}]
},
```
#### keep-alive
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
用法：
```
<keep-alive>
<component>
<!-- 该组件将被缓存！ -->
</component>
</keep-alive>
```
1. props
**include**：字符串或者正则表达式，只有匹配的组件会被缓存
**exclude**：字符串或者正则表达式，任何匹配的组件都不会被缓存
```
// 组件 a
export default {
name: 'a',
data () {
return {}
}
}
```
* * * * *
```
<keep-alive include="a">
<component>
<!-- name 为 a 的组件将被缓存！ -->
</component>
</keep-alive>可以保留它的状态或避免重新渲染
```
2.vue-router
vue-router也是一个组件，如果直接被包在keep-alive里面，所有路径匹配的视图组件**都会被缓存**
3. router-view里面某个组件被缓存
**使用include/exclude**
```
<keep-alive include="a">
<router-view>
<!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
</router-view>
</keep-alive>
```
需要知道组件的 name，项目复杂的时候不是很好的选择
**增加router.meta属性**
```
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
```
* * * * *
```
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件，比如 Home！ -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>
```
优点：不需要例举出需要被缓存组件名称
5. 实例
```
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>
<HomeFooter/>
```
* * * * *
```
{ path: '/IndexHome', component: IndexHome,
children: [
{
path: 'Home',
component: Home,
name:'home',
meta: {
keepAlive: true // 需要被缓存
}
},
{
path:'Cart',
component:Cart,
name:'cart',
meta: {
keepAlive: false // 不需要被缓存
}
},
{
path:'UserCenter',
component:UserCenter,
name:'usercenter',
meta: {
keepAlive: true // 需要被缓存
}
},
{
path:'Discover',
component:Discover,
name:'discover',
meta: {
keepAlive: true // 需要被缓存
}
}]
},
```
#### vue实现前进刷新，后退不刷新
加载过的页面能缓存起来（返回不用重新加载），关闭的界面能被销毁（再进入时重新加载）
