## 一、概述  `router-view` 也是一个vue组件。它可以被视做是一个容器，它渲染的组件是你使用 vue-router 路由匹配到的组件；它是一个 functional 组件，渲染路径匹配到的视图组件。`<router-view>`渲染的组件还可以内嵌自己的`<router-view>`，根据嵌套路径，渲染嵌套组件。 ## 二、属性 目前仅name属性，如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。 * 类型:`string` * 默认值:`"default"` ## 三、keep-alive 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。 如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 1、keep-alive的生命周期 初次进入时：created > mounted > activated；退出后触发 deactivated 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中； 2、用法 1）、更改App.vue ``` <div id="app" class='wrapper'> <keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不需要缓存的视图组件 --> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> ``` 2）、在路由中设置keepAlive ``` .{ path: 'list', name: 'itemList', // 商品管理 component (resolve) { require(['@/pages/item/list'], resolve) }, meta: { keepAlive: true, title: '商品管理' } } ``` 3）、更改 beforeEach钩子 这一步是为了清空无用的页面缓存。为了解决这个问题，需要判断页面是在前进还是后退。 在beforeEach钩子添加代码： ``` let toDepth = to.path.split('/').length let fromDepth = from.path.split('/').length if (toDepth < fromDepth) { // console.log('back...') from.meta.keepAlive = false to.meta.keepAlive = true } ```