如何在Vue中点击路由时弹出v-dialog对话框？

Question

大致就是点击路由后不要进入主界面而是直接弹出v-dialog。。。咋个实现呢

Answer 1

在vue的router.beforeEach中做操作，对话框确定后再放行

Answer 2

在 导航守卫 中处理。至于你的 v-dialog 得看你的组件库是不是提供了 API 调用的方式。

可以参考一些Admin框架的动态路由部分：
vue-admin-better/src/config/permission.js · zxwk1998/vue-admin-better

Answer 3

如果所有路由都要弹出v-dialog，可以用全局路由前置守卫beforeEach

router.beforeEach((to, from, next) => {
  // ...
})

如果某一个路由要弹出v-dialog，可以使用路由独享守卫beforeEnter

const routes = [
  {
   ...
    beforeEnter: (to, from) => {
      // reject the navigation
    },
  },
]

当然还可以使用组件内的路由守卫

beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },

具体的实现还是得看需求。

Answer 4

最简单的办法就是点击路由时候直接跳转到一个打开了dialog路由的页面。当关闭路由时候再调用history.back()就行了。

// 注册路由
{
    path: '/dialogRouter',
    component: DialogRouter.vue
}

// router.vue
<template>
    <menu @click="goRouter"></menu>
</template>
<script>
// 跳转时候直接跳转弹框页面
const goRouter = () => {
    router.push('/dialogRouter')
}
</script>

// DialogRouter.vue 默认弹框就是打开的
<template>
    <dialog open @close="backRouter"></dialog>
</template>
<script>
// 关闭弹框直接跳转回来时页面
const backRouter = () => {
    history.back()
}
</script>