路由

1. vue-router：一个Vue的插件库，专门用来实现SPA应用

2. SPA

   1. 单页Web应用（Single page web application，SPA）
   2. 整个应用只有一个完整页面（index.html)
   3. 点击页面中的导航链接，不会刷新页面，只会做页面的局部更新
   4. 数据需要通过Ajax请求获取

3. 定义

   1. 一个路由就是一组映射关系（key-value）
   2. key为路径，value可以是function或component

4. 分类

   1. 前端路由

      1. 理解：value是component，用于展示页面内容
      2. 工作过程：当浏览器的路径发生变化，对应组件展示

   2. 后端路由

      1. 理解：value是一个function，用于处理客户端提交的请求
      2. 工作过程：服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回相应数据

路由基本使用

1. 安装路由

   1. 默认路由版本为4，此版本匹配Vue3

   2. Vue2匹配版本为3

      npm i vue-router@3
      

2. 使用路由

   1. 添加router文件

   2. 配置路由

      //该文件用于创建整个应用的路由器
      import VueRouter from "vue-router";
      import About from '@/component/About.vue'
      import Home from "@/component/Home.vue";
      // 创建并暴露一个路由器
      export default new VueRouter({
          routes:[
              {
                  path:'/about',
                  component:About
              },
              {
                  path:'/home',
                  component:Home
              },
          ]
      })
      

   3. 引入路由

      main.js文件

      import Vue from 'vue'
      import App from './App.vue'
      import VueRouter from "vue-router";
      Vue.config.productionTip = false
      Vue.use(VueRouter)
      import router from "@/router";
      new Vue({
          render: h => h(App),
          router,
      }).$mount('#app')
      ​
      

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

                  <div class="col-xs-2 col-xs-offset-2">
                      <div class="list-group">
                          <!--使用a标签实现页面跳转-->
                          <!--<a class="list-group-item active" href="./about.html">About</a>
                               <a class="list-group-item" href="./home.html">Home</a>-->
                          <!--借助router-link标签实现路由切换-->
                          <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>
                  </div>
      

   5. 在指定位置显示

      <template>
          <div>
              <div class="row">
                  <div class="col-xs-offset-2 col-xs-8">
                      <div class="page-header"><h2>Vue Router Demo</h2></div>
                  </div>
              </div>
              <div class="row">
                  <div class="col-xs-2 col-xs-offset-2">
                      <div class="list-group">
                          <!--借助router-link标签实现路由切换-->
                          <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>
                  </div>
                  <div class="col-xs-6">
                      <div class="panel">
                          <div class="panel-body">
                              <!--指定组件呈现位置-->
                              <router-view/>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </template>
      ​
      <script>
      export default {
          name: 'App',
      }
      </script>
      ​
      ​
      

路由使用注意点

组件分类

1. 一般组件：此类组件存放在src目录下的components文件夹中
2. 路由组件：此类组件存放在src文件夹下的pages文件夹中

组件间切换实质

路由组件间切换时，隐藏的组件默认被销毁，被选择的组件挂载，组件间切换实质为各组件的挂载与销毁

各组件实例属性

1. 每个组件均有自己的$route 属性用于存放自己的路由信息
2. 整个应用只有一个router ，可通过$router 属性获取