[toc]
使用`<router-view/>`确定路由组件渲染的位置
### 关于缓存
**默认**,每次切换进一个路由组件,该路由组件都会**重新加载**
要想路由组件得到缓存,需要使用Vue自带的`<keep-alive>`组件对`<router-view>`进行包裹
### exclude
使用`<keep-alive>`后,所有路由组件都会有缓存,但如果你想某些路由组件不缓存,比如**详情页面**、个人信息页面等,这些根据不同id渲染的内容不同的页面就不需要缓存,那怎么破呢?
可以在`<keep-alive>`设置一个`exclude`属性,excluede,排除的意思
除此之外通过声明周期`activated`也能达到同样的效果
### router-view也可以设置类名
这样设置的类名,就会作用于匹配到的路由组件的根节点
并且不会覆盖设置在路由组件上的类名
![](https://box.kancloud.cn/8d17f5f4c64791f862c306a38b15001f_286x211.png)
- 空白目录
- vue-cli
- runtime-only
- Vue对比React
- 组件与实例
- data-binding
- computed的set和get
- scoped
- 事件
- 自定义指令
- 插件
- keep-alive
- $nextTick与生命周期
- 路由
- Vue.use(Router)
- this.$router编程式导航
- this.$route
- new Router
- routes
- mode
- linkClass
- scrollBehavior
- query
- fallback
- base
- router-view
- router-link
- 路由守卫
- 左右切换
- 滚动
- FAQ
- vuex
- 适用
- new Vuex.Store
- state
- mutations
- getters
- actions
- strict
- plugins
- modules
- namespace
- this.$store
- commit
- dispatch
- mapXX
- eventBus
- Vue工程相关
- 引用路径的简化
- css-module
- vue-loader
- 异步加载
- 支持jsx
- 让webpack支持对vuex的热替换
- .eslintrc