import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import About from '@/components/about'Vue.use(Router)export default new Router({mode:'history',routes: [{path: '/home',name: 'Home',component: Home},{path: '/about',name: 'About',component: About},{ path: '/', redirect:'/home' }]
})

<template><div id="app"><router-link :to="{path:'/home'}">home</router-link><router-link :to="{path:'/about'}">about</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</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>

<template><div class="home"><p>{{msg}}</p><transition name="slide-fade"><v-modal v-show="modalStatus" :title="title" :content="content" :btnType="btnType"><slot>

    </slot></v-modal></transition><button @click="openHomeModal()">打开modal</button></div>
</template><script>
import Modal from "@/components/modal.vue";
export default {name: "HelloWorld",data() {return {msg: "我是首页信息",modalStatus: false,title: "我是首页，我骄傲",content: "我是首页的内容",

};},components: {"v-modal": Modal},methods: {openHomeModal() {this.modalStatus = true;}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {transition: all .3s ease;
}
.slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {transform: translateY(-10px);opacity: 0;
}
</style>

<template><div class="about"><p>{{aboutmsg}}</p><button @click="openHomeModal()">打开about里面的modal</button><transition name="slide-fade"><v-modal v-show="modalStatus" :title="title" :content="content"><slot>

      </slot></v-modal></transition></div>
</template>
<script>
import Modal from "@/components/modal.vue";
export default {data() {return {modalStatus: false,aboutmsg: "我是关于页面",title: "我是关于页面的title",content: "我是关于页面的内容",
　　　　btnType:["value":"确定","class":"default"]
};},methods: {openHomeModal() {this.modalStatus = true;}},components: {"v-modal": Modal}
};
</script>
<style lang="scss">/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {transition: all .3s ease;
}
.slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {transform: translateY(-10px);  //从上面下移，逐渐出现opacity: 0;
}
</style>

<template><div class="modal"><div class="header">{{title}}</div><div class="content">{{content}}</div><div class="footer"><slot></slot></div></div>
</template>
<script>
export default{data(){return {}},props:['title','content'],}
</script>
<style lang="scss">
.modal {width:500px;height:400px;position: absolute;top:50%;left:50%;margin-toP:-250px;margin-left:-200px;border:1px solid #666;.header {height:60px;line-height:60px;text-align: center;background:#666;border-bottom: 1px solid #000;box-sizing: border-box;}.content {background:orange;height:290px;}.footer {height:50px;line-height: 50px;button {vertical-align: middle;display: inline-block;width:80px;height:40px;line-height: 40px;color:#fff;&.danger{background:red;}&.default{background:#ddd;}}}
}
</style>