el常用组件之弹出组件 dialog

 views->elements->pop.vue， dialog组件

<template>
    <div>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false
        };
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
</script>

<style lang="scss" scoped></style>

更改路由 router-> index.js，增加/pop路径

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes:[
    // 学习vuex， 多定义一个路由
    {
      path:'/',
      component:() => import('../views/Parent.vue'),
      // 重定向
      redirect:'/pop'
    },
    {
      path:'/home/:id',
      // 动态路由传参，根据name指定，需要多配置一个name
      name:'home',
      component:() => import('../views/Home.vue'),
      Children:[{
        path:'/child',
        component:() => import('../views/Child.vue')
      }]
    },
    {
      // elementUI 之 layout
      path:'/layout',
      component:() => import('../views/elements/layout.vue')
    },
    {
      // elementUI 之 pop
      path:'/pop',
      component:() => import('../views/elements/pop.vue')
    },
  ]
})

export default router