vue 弹框iframe_做一个vue模态弹出框如何

运用的知识点包括：

路由的配置

插槽

vue的过渡动画

路由重定向

router/index.js里面配置路由

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' }

]

})

app.vue

home

about

export default {

name: 'App'

}

#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;

}

home.vue

{ {msg}}

{ {item.vlaue}}

打开modal

import Modal from "@/components/modal.vue";

export default {

name: "HelloWorld",

data() {

return {

msg: "我是首页信息",

modalStatus: false,