关于Vue.mixin在vue官方文档中是这么解释的：

　　混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

 

　　我们的理解：Vue.mixin给我们提供了一种混入Vue实例的方法，创建了混入对象之后，我们自定义的方法或者变量可以很轻松的挂载在Vue实例上，给我们的偷懒带来方便；

　　Vue.mixin为我们提供了两种混入方式：局部混入和全局混入；

　　本文还是以demo形式来进行学习讲解，如果有条件最好还是跟着demo敲一遍，这样印象才会深刻；

　　局部混入：

　　　　顾名思义就是部分混入，也就是只有引入了mixin的混入对象才可以使用，并且只有在引入了mixin混入对象的组件中才生效；

　　　   来，知道了概念，我们一起来看看代码：

　　　　首先自己搭建Vue的开发环境，然后我们在src目录中新建两个vue文件，分别是page1.vue和page2.vue；

　　　　page1.vue

<template>    <div>page1的值是:</div></template><script> export default {   data () {     return {           }   }, } </script><style scoped></style>

 

　　　　page2.vue

<template>    <div>page2的值是:</div></template><script> export default {   data () {     return {              }   } } </script><style scoped></style>

　　然后我们修改App.vue

<template>  <div id="app">    <button @click="method1">page1</button>    <button @click="method2">page2</button>    <router-view></router-view>  </div></template><script> export default {   name: 'App',   methods:{     method1(){       this.$router.push('/page1');     },     method2(){       this.$router.push('/page2');     }   } } </script><style> #app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

　　在src目录下创建router.js文件，配置路由实现跳转

import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter);  import page1 from "./page1"; import page2 from "./page2";  const routes=[     {path:"/page1",component:page1},     {path:"/page2",component:page2} ]   const router=new VueRouter({     routes })   export default router

　　最后将路由引入main.js中：

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue' import App from './App' import router from './router.js'  Vue.config.productionTip = false/* eslint-disable no-new */new