vue-router的配置方式

一、在router文件夹中的index文件中的路由配置

二、在入口文件main.js中导入router

三、在App.vue文件中通过和来使用路由

router-link

该标签是一个vue-router中已经内置的组件, 它默认会被渲染成一个 a标签.
其他属性：
- to属性：用于指定跳转的路径
- tag属性：可以指定router-link之后可以渲染成什么组件，默认是一个a标签
- replace属性：不会留下history记录，指定replace的情况下，不能返回上一页
- active-class属性：

router-view

在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变.（点击首页或关于，router-view的区域会改变，首 页和关于两个标签不会改变）

router-view用于告诉要把组件渲染到什么位置。渲染出来的组件会替换router-view所在的位置，相当于占位。

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存，不会被重复创建和销毁。

keep-alive

keep-alive：是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。
keep-alive有两个重要属性：
① exclude=‘组件的name’ 不包含这个组件，不包含的组件，不会被缓存
② include=‘组件的name’,包含这个组件，只有包含的的组件，才会被缓存
注意：如果不使用这两个属性，默认所有routers中的组件都会缓存

activated和deactivated生命周期函数：只有该组件被保持了状态使用了keep-alive时，才是有效的。
① 当组件处于活跃时触发activated函数

② 当组件处于不活跃时触发deactivated函数