精彩代码 vue.js

摘要：这个是发射事前，在父亲组件绑定这个事件，这个事件就可以发生了。

新建完项目，先做好准备工作

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一般都不用动，用作来做路由跳转