vue中, 页面跳转只打开一个标签页,后续打开的页面都在这个标签页展示,怎么实现?

在 Vue 中实现页面跳转只打开一个标签页，后续打开的页面都在这个标签页展示，可以使用 Vue Router 的导航守卫来实现。

具体实现步骤如下：

1. 在路由配置中，给需要跳转的路由设置一个唯一的 name。

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

2. 在路由跳转前，判断当前路由是否已经打开过，如果已经打开过，则不需要再打开一个新的标签页。

router.beforeEach((to, from, next) => {
  const routerList = store.state.routerList
  const index = routerList.findIndex(item => item.path === to.path)
  if (index !== -1) {
    // 如果已经打开过，则将当前路由设置为激活状态
    store.commit('setActiveRouter', routerList[index])
    next(false)
  } else {
    // 如果没有打开过，则将当前路由添加到路由列表中
    const router = {
      path: to.path,
      name: to.name,
      title: to.meta.title || to.name,
      icon: to.meta.icon || '',
      query: to.query,
      params: to.params
    }
    store.commit('addRouter', router)
    store.commit('setActiveRouter', router)
    next()
  }
})

3. 在页面渲染时，根据当前激活的路由来展示对应的组件。

<template>
  <div class="main">
    <component :is="activeRouter.name"></component>
  </div>
</template>

<script>
export default {
  computed: {
    activeRouter () {
      return this.$store.state.activeRouter
    }
  }
}
</script>

上述代码中，我们通过 store 来保存路由列表和当前激活的路由，并在页面渲染时展示对应的组件。这样就可以实现页面跳转只打开一个标签页，后续打开的页面都在这个标签页展示的效果。