vue页面跳转模态

页面跳转是Web开发中经常需要使用的功能，而模态框是一种常见的呈现信息的方式。Vue是一种前端框架，使开发这样的页面跳转和模态框更加简单。

在Vue中，可以使用Vue Router来管理页面跳转。Vue Router可以很方便地定义路由和页面组件，从而实现页面跳转。使用Vue Router还可以方便地实现组件的懒加载，提高页面加载效率。

const router = new VueRouter({
  routes: [
    {
      path: '/',component: Home
    },{
      path: '/about',component: () => import('./views/About.vue')
    }
  ]
})

在Vue中，可以通过v-show和v-if指令来实现模态框的显示和关闭。v-show指令在条件为真时将元素显示出来，而v-if指令则会动态创建并销毁元素，可以在不需要时释放页面资源。

示例代码中的Modal组件可以接收title和message参数，通过调用open方法可以显示模态框，并返回一个Promise对象。当用户点击OK或Cancel按钮时，Modal组件会调用resolve或reject方法，以便Promise对象的then或catch方法得到执行。

在页面中使用这个Modal组件可以这样做：

modal.open('Confirm','Are you sure?')
  .then(() => {
    // 用户点击OK按钮
  })
  .catch(() => {
    // 用户点击Cancel按钮
  })

在Vue中使用页面跳转和模态框是非常简单的，使开发人员可以专注于业务逻辑。