一.概念

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件。

二.使用步骤

1. 安装vue-router，命令：npm i vue-router
2. 应用插件：Vue.use(VueRouter)
3. 编写router配置项
4. 路由子组件展示  <router-link active-class="active" to="/about">About</router-link>
5. 路由切换  <router-view></router-view>

//1.引入VueRouter
import VueRouter from 'vue-router'
//引入其它 组件
import About from '../components/About'
import Home from '../components/Home'

//2.在router/index.js文件中填写路由规则(如没有创建路由对象)
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

//3.在指定位置展示路由( 占坑 )
<router-view></router-view>

//4.路由切换
<router-link active-class="active" to="/about">About</router-link>

三.注意事项

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的\$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的\$router属性获取到。

四.多级路由

1. 配置路由规则，使用children配置项：