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

新建完項(xiàng)目，先做好準(zhǔn)備工作

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路由懶加載，當(dāng)組件太多的時(shí)候，
vue這種單頁面應(yīng)用，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁時(shí)，需要加載的內(nèi)容過多，時(shí)間過長，會(huì)出啊先長時(shí)間的白屏，即使做了loading也是不利于用戶體驗(yàn)，而運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時(shí)
簡(jiǎn)單的說就是：進(jìn)入首頁不用一次加載過多資源造成用時(shí)過長?。?！

其實(shí)懶加載十分簡(jiǎn)單,幾個(gè)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;
使用的時(shí)候，直接
this.$axios

3、main.js的設(shè)置

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/*生產(chǎn)提示*/
Vue.prototype.$axios = axios;
/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: ""
})

4、app.vue一般都不用動(dòng)，用作來做路由跳轉(zhuǎn)