rotute使用

学无止境，望君把握时间。

封装自定义插件库。

步骤：
1.定义一个组件  Loading.vue
2.注册组件：
import LoadingTlp from './component/Loading.vue'
export const loading = {
   install () {
      Vue.component('loading', LoadingTlp);
   }
}

//使用组件：
import Loading from './xxx/loading/index.js'
 Vue.use(Loading)

2.vue-rotute

路由：SPA:single page application(单页面应用)
特点：速度快，数据ajax请求，通过路由，不会整体重载。
实现：路由 -> 加载(ajax)对应的内容 告诉你去哪? 根据url的不同，加载组件
  路由的要求:引入 vue-router 插件

npm/cnpm i/install vue-router -

基础：
1. vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？
---  hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api
 的浏览器。
--- history: 依赖 HTML5 History API 和服务器配置。**【需要后端支持】**
--- abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现
没有浏览器的 API，路由会自动强制进入这个模式。
2. 路由的使用的步骤：
  1.安装 vue-router   `yarn add vue-router -S`
  2.在src目录下创建一个router目录， 里面创建一个index.js文件  ， 这个目录就是router
  的模块
  3.引入第三方的依赖包, 并注册路由
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use( VueRouter ) //使用vue-router这个第三方插件
    值得注意的是：
    import这个关键字要放在整个文件的上层！！！
 4.创建了一个router对象实例，并且创建路由表
   const routes = [ 
      {
        path : '/home',
        component : Home
      }//每一个对象都是一个路由
   ]
   cont router = new VueRouter({
        routers //路由表，必须填写。
   })
 5.导出router实例：
    expotr default router
 6.入口文件main.js中引入路由的实例router，然后在根实例中注册。
   import router from './router/index.js'
   new Vue({
      el : "#app",
      router,
      render : (h) => App
   })
7.给路由一个展示区域：
 1.如果是一级路由，那么我们放在APP组件中，用一个router-view的组件表示
8.当页面第一次打开时，需要做一个重定向，就是调到一个默认的路由上。
  const routes = [
      {
        //需要将这个重定向放在路由配置的最上面
        path : '/',
        redirect : '/home'
      }
  ]
9.业务错误（错误路由）：
  const routes = [
      {
        path : '/',
        redirect : '/home'
      },
      {
        path : '/home',
        component : Home
      },
      .
      .
      ,{
        path : '**',
        redirect : '/error'
      }
  ]
10. vue路由模式的确定 mode
   1.如果你使用的是hash,那么a标签就可以使用
   2.如果你使用的是history,那么我们最好将a标签改成  router-link 这个组件  
    ----- router-link 这个组件 身上必须要有一个 to 属性