摘要：這個是發射事前，在父親組件綁定這個事件，這個事件就可以發生了。

新建完項目，先做好準備工作

1 定義全局路由

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      redirect : "/home",
      name: "index",
      component : () => import("@/page/home.vue")
    },
    {
      path: "/detail/:codeId",
      name: "detail",
      component : () => import("@/page/detail.vue")
    },
    {
      path: "/list",
      name: "list",
      component : () => import("@/page/list.vue")
    },
    {
      path: "/home",
      name: "home",
      component : () => import("@/page/home.vue")
    },
  ]
})

1.1路由懶加載，當組件太多的時候，
vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要加載的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利于用戶體驗，而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時
簡單的說就是：進入首頁不用一次加載過多資源造成用時過長！！！

其實懶加載十分簡單,幾個resolve就行了

export default new Router({
  routes: [
    {
      path: "/",
      component: resolve => require(["components/index.vue"], resolve)
    },
    {
        path: "/about",
        component: resolve => require(["components/About.vue"], resolve)
    }
  ]
})

2、axios 類似就是jq的ajax

Vue.prototype.$axios = axios;
使用的時候，直接
this.$axios

3、main.js的設置

import Vue from "vue"
import App from "./App"
import router from "./router"
import axios from "axios"
import MintUI from "mint-ui"
import "mint-ui/lib/style.css"

Vue.use(MintUI)
Vue.config.productionTip = false/*生產提示*/
Vue.prototype.$axios = axios;
/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: ""
})

4、app.vue一般都不用動，用作來做路由跳轉