<template> <div> <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 Vue({ el: '#app', router, components: { App }, template: '<App/>' })
完成上述准备工作之后，我们可以看到现在的页面效果如下：
没有报错，我们开始正式进入学习Vue.mixin：
首先我们在src目录下新建一个名为mixin的文件夹并在mixin文件中创建一个mixin.js文件：
//抛出混入对象，方便外部访问 export const mixin={ data(){ return { number:1 } } }
可以看到我们在混入对象中创建了一个变量，是的，混入对象跟Vue实例的格式是一样的；
然后我们可以将mixin.js引入到我们的page1.vue和page2.vue中
page1.vue
<template> //这里读的值其实是mixin的值，因为这个时候mixin已经混入到vue实例中了 <div>page1的值是:{{number}}</div> </template> <script> //引入mixin.js import {mixin} from "./mixin/mixin" export default { //这里注意：属性名为mixins，值为数组类型 mixins:[mixin], data () { return { } }, } </script> <style scoped> </style>
page2.vue
<template> <div>page2的值是:{{number}}</div> </template> <script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } } } </script> <style scoped> </style>
这个时候我们的混入对象已经成功混入到Vue实例中，你们可以点击看看效果，是可以正常运行并且能读取到值的；
现在我们来修改page1.vue的代码：
<template> <div>page2的值是:{{number}}</div> </template> <script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } } } </script> <style scoped> </style>
page2不变，再运行可以发现，我们的page1.vue中的值是执行了mounted，所以产生了自增
由此，我们可以知道mixin混入对象的变量是不会共享的；也就是你page1发生了变化，并不会通知mixin进行实时刷新数据，发生的变化只会在page1.vue中生效，不影响其他组件；
现在我们修改mixin.js和page1.vue中的代码：
mixin.js
export const mixin={ data(){ return { number:1 } }, created(){ console.log("mixin混入对象") } }
page1.vue
<template> <div>page1的值是:{{number}}</div> </template> <script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } }, created(){ console.log("这里是page1"); } } </script> <style scoped> </style>
这个时候我们再运行可以发现控制台输出是这个样子的：
是的，mixin混入对象中声明了：如果是同名钩子函数将合并为一个数组，因此都被调用，但是混入对象的钩子将在自身实例钩子之前触发；
值为对象的选项，例如methods,components等如果变量名和mixin混入对象的变量名发生冲突，将会以组件优先并进行递归合并，相当于组件数据直接覆盖了mixin中的同名数据；
我们可以修改代码mixin.js和page1.vue
mixin.js
export const mixin={ data(){ return { number:1 } }, methods:{ demo1(){ console.log("mixin混入对象") } } }
page1.vue