vue中全局弹窗内引入路由怎么写？

Question

标题可能不大准确，说下我的使用场景

目前一个项目内有多个页面，每个页面都有列表，点击列表中的标题可以弹出详情页的弹窗，底层还是之前的页面

因为这个详情页之前有做过，所以就直接拿过来了

下面代码是我之前的【直接跳转新页面】的一个调用方式

<router-link 
  :to="{name:'detailPages', params:{detailType:'news', id:30436833}}" 
  class="title" 
  target="_blank">
  详情页
</router-link>

但是目前改为弹窗的形式，我有点儿疑惑

疑惑点主要是在于，点击列表标题，路由改变，显示弹窗

由于路由改变，此时如何才不会影响我原本的页面？

Answer 1

可以把你的详情页路由改一下，改到列表页下面，让后在列表页的弹框里面加入<router-view />，下面是一个例子：

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/list',
      components: {
        default: ListPage,
        detail: DetailPage
      }
    }
  ]
})

// list页面
<template>
  <div>
    ...
  </div>
  <modal>
    <router-view name="detail"/>
  </modal>
</template>

具体可以参考vue-router命名路由