在Vue.js路线更改上打开模态

Question

目前，我的vue-router配置如下所示：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings,
    }
  ],
});

现在，我想在导航中定义一条新路径，比如说/some-modal-path，一个模态，比如ModalComponent，将作为当前组件上方的叠加打开。

这可以用vue-router完成吗？如果是的话，怎么办呢？

Answer 1

快速解决方案

将<router-view>放入每个组件

export default new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          children: [
            {   path: '/some-modal-path',
                component: ModalComponent,
                name: 'ModalComponent'
            }
          ]
        },
        {
          path: '/settings',
          name: 'settings',
          component: Settings,
          children: [
            {   path: '/some-modal-path',
                component: ModalComponent,
                name: 'ModalComponent'
            }
          ]
        }
      ],
    });