在 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'
            }
          ]
        }
      ],
    });

在 Vue.js 路线更改时打开模式

Open a modal on Vue.js route change

vue.js

vue-router

vuejs2