Vue-Router 使用

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

2. 前端路由：key是路径，value是组件

Vue Router 是 Vue.js (opens new window)官方的路由管理器。

一、基本使用

1. 安装vue-router，命令：npm i vue-router
2. 应用插件：Vue.use(VueRouter)
3. 编写 router 配置项：

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   import { Foo } from '../components/Foo'
   import { Bar } from '../components/Bar'
   
   Vue.use(VueRouter)
   
   //创建router实例对象，去管理路由规则
   const router = new VueRouter({
     { path: '/foo', component: Foo },
     { path: '/bar', component: Bar }
   })
   
   const app = new Vue({
     router
   }).$mount('#app')

4.  实现切换（active-class可配置高亮样式）

   <router-link active-class="active" to="/foo">Foo</router-link>

5. 指定显示位置

   <router-view></router-view>

二、几个注意点 

1. 路由组件通常存放在 pages 文件夹，一般组件通常存放在 components 文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的 $route