Vue-router（路由）的使用

介绍

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

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

前端路由的工作方式

        1.用户点击了页面上的路由链接

        2.导致了URL地址栏中的Hash值发生变化

        3.前端路由监听到了Hash地址的变化

        4.前端路由把当前Hash地址对应的组件渲染到浏览器中

基本使用

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：Vue.use(VueRouter)

3. 编写router配置项:

   //引入VueRouter
   import VueRouter from 'vue-router'
   // 引入组件
   import About from "../pages/About";
   import Home from "../pages/Home";
   
   //创建router实例对象，去管理一组一组的路由规则
   export default new VueRouter({
       // 配置路由规则
       routes: [
           {
               // 路由重定向
               path: "/",
               redirect: '/home'
           },
           {
               path: '/about',
               component: About
           },
           {
               path: '/home',
               component: Home
           }
       ]
   })

4. 将router配置项配置到Vue实例中

   import Vue from 'vue'
   import App from './App.vue'
   import VueRouter from 'vue-router'
   import router from './router'
   
   Vue.config.productionTip = false
   // 应用 VueRouter 插件
   Vue.use(VueRouter)
   
   new Vue({
     render: h => h(App),
     // 将配置对象挂载到Vue实例上
     router
   }).$mount('#app')
   

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

   <div class="list-group">
       <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
       <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
   </div>

6. 指定展示位置

   <router-view></router-view>

几个注意点

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