在vue3中，当父路由和子路由不同时存在场景下的一些问题

[wangrongding]

场景：
假设有一个List列表页面，点击List列表页面中的项目，跳转到Detail详情页。

( xxxxx/list --> xxxxx/list/detail?id=123 )
在大多数情况下我们普遍的期望是当进入 Detail详情页 路由时，页面中只显示相应的 Detail 组件，而不再显示 List 页面的内容。

问题：

如果只是为了达到 List 和 Detail 同时只有一个存在.

1. 可以将路由重新设计为扁平化的。然而这会破坏这两个路由本身所拥有的父子语义，因为 UI 的表现而去破坏语义是不理想的。其次，我们项目中还有一个根据路由层级自动生成的面包屑导航，破坏 list 和 detail 的父子关系会导致面包屑导航无法正确工作。

2. 或者是像这样

<template>
    <router-view v-if="$route.path != '/Detail'" />
    <div v-else>List</div>
</template>

3. 或者是像Vue2中这样

// routeReplaceSelf.js
export default function routeReplaceSelf(component) {
  return {
    name: 'routerReplaceSelf',
    computed: {
      showChild() {
        const deepestMatchedRoute = this.$route.matched[this.$route.matched.length - 1];
        return deepestMatchedRoute.instances.default !== this;
      },
    },
    render(h) {
      return this.showChild ? h('router-view') : h(component);
    },
  };
}

// router.js
import routeReplaceSelf from '../hoc/routeReplaceSelf'
import List from '../xxx/List'
import Detail from '../xxx/Detail'
...
routes: [
    {
      path: '/list',
      name: 'list',
      component: routeReplaceSelf(List),
      children: [{
        path: 'detail/:id',
        name: 'detail',
        component: Detail,
      }]
    }
  ]
...

问题源自于：https://liximomo.github.io/vue-router-replace
具体演示可以看这个示例 👉 链接

想问一下在 Vue3 中，如何像三个方法一样实现呢？或者还有其他更好的方法？

[william-xue]

如果只是为了达到 List 和 Detail 同时只有一个存在.

为什么要这样

[wangrongding]

路径和页面保持一致的语义化我觉得看起来会更清晰，所以我认为第三种是最好的，虽然它会增加耦合性。

[liulinboyi]

This can work in Vue3.

import { createRouter, createWebHistory } from "vue-router";
import List from "./components/List";
import Detail from "./components/Detail";
const routes = [
  {
    path: "/list",
    name: "list",
    component: List
  },
  {
    path: "/list/detail/:id",
    component: Detail,
    name: "detail"
  }
];

export const router = createRouter({
  history: createWebHistory(),
  routes
});

Codesandbox Link

[wangrongding]

你好，假如不想扁平化路由的情况下，在vue3中可以实现上述的第三种方法嘛？

[philibe]

Hello,

Is it possible to write in English ?

It's not my native language but I make the effort.

I know others persons who have less knowledge than me in English but they use many online automatic translator that exist now for years.

Thanks in advance :)

Philippe

Cc:
@yyx990803
@LinusBorg

[wangrongding]

Hello,
Is it possible to write in English ?
It's not my native language but I make the effort.
I know others persons who have less knowledge than me in English but they use many online automatic translator that exist now for years.
Thanks in advance :)
Philippe
Cc: @yyx990803 @LinusBorg

Thank you, i was working on a project using vue3, and vue-router4, and I met with some problems with the newest vue and vue-router. In vue2 and vue-router3.0, when I was dealing with nested router, I made a HOC that can render a component or router-view, but with vue3 and vue-router4.0, I can't get the instances.default through route.matched.

in vue2

// routeReplaceSelf.js
export default function routeReplaceSelf(component) {
  return {
    name: 'routerReplaceSelf',
    computed: {
      showChild() {
        const deepestMatchedRoute = this.$route.matched[this.$route.matched.length - 1];
        return deepestMatchedRoute.instances.default !== this;
      },
    },
    render(h) {
      return this.showChild ? h('router-view') : h(component);
    },
  };
}

// router.js
import routeReplaceSelf from '../hoc/routeReplaceSelf'
import List from '../xxx/List'
import Detail from '../xxx/Detail'
...
routes: [
    {
      path: '/list',
      name: 'list',
      component: routeReplaceSelf(List),
      children: [{
        path: 'detail/:id',
        name: 'detail',
        component: Detail,
      }]
    }
  ]
...

Because this way I can easily maintain the menu and breadcrumb navigation. How to implement this in vue3？