如何在模态中打开vue-router

Question

我一直在尝试让路由器视图在模态中工作（如 twitter）。有人可以帮忙吗？

这也许是实现这一目标的一种方法，但我不确定它是否正确

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/other',
      components: {
        default: Foo,
        modal: Bar,
      }
    }
  ]
})

new Vue({
	router,
  el: '#app'
})

   
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Named Views</h1>
  <ul>
    <li>
      <router-link to="/">/</router-link>
    </li>
    <li>
      <router-link to="/other">/other</router-link>
    </li>
  </ul>
  <router-view class="view one"></router-view>
  <router-view class="view two" name="modal"></router-view>
</div>

如何使用modal router-view在modal里面打开？

Answer 1

您可以将Bar 定义为开放模式。 这样，当您导航到 other 时，模式会显示出来，而当您离开时，它会被隐藏。