vistas->elementos->pop.vue, componente de diálogo
<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>
Cambie la ruta del enrutador-> index.js, agregue /pop ruta
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