使用 vue 路由的最佳方式是什么？

Question

我对 Vue 路由有点陌生。我在Home.vue 有一张桌子，每一行都有一个按钮，以便查看详细信息。我会试着解释我的想象。我希望重定向打开一个新屏幕Overview，其侧边栏有 3 个选项：Overview、Commits 和Files。我的问题是要了解什么应该是父母，什么应该是孩子。我确定Commits 和Files 是孩子，但Overview 应该也是孩子还是Commits 和Files 的父母？重定向到详细信息的行：

<router-link :to="{ 'name': 'details', 'params': { 'tool': tool } }">{{id}}</router-link>

我目前拥有的路线：

const DetailsChildren = [
    {
        path: 'commits/:tool',
        name: 'commits',
        component: commits
    },
    {
        path: 'files/:tool',
        name: 'files',
        component: files
    }
];

export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        }
        {
            path: '/overview/:tool',
            name: 'details',
            component: details,
            children: DetailsChildren
        }
    ],
    mode: 'history'
});

而DetailsChildren如下：

<template>
    <div class="main">
        <sidebar />
        <router-view />
    </div>
</template>

目前DetailsChildren 是Overview。但我认为DetailsChildren 应该是Overview、Files 和Commits 的父级，然后我需要创建另一个组件Overview。但是我有两个问题。第一个是当我从桌子移动到DetailsChildren 时如何加载Overview？第二个是我希望路由是/overview/:tool。我有点困惑。在这种情况下处理路线的最佳方法是什么？

Answer 1

您想要做的是在您的details 路由下有三个孩子，每个孩子都有自己的来自/ 的绝对路径。

const DetailsChildren = [
    {
        path: '/overview/:tool',
        name: 'overview',
        component: overview
    },
    {
        path: '/commits/:tool',
        name: 'commits',
        component: commits
    },
    {
        path: '/files/:tool',
        name: 'files',
        component: files
    }
];

这将创建以下路径映射

• /overview/:tool
  • 顶级组件：details
  • 子组件：overview
• /commits/:tool
  • 顶级组件：details
  • 子组件：commits
• /files/:tool
  • 顶级组件：details
  • 子组件：files

请参阅Nested Routes 上的指南。

您可能认为您可以为 overview 路由使用空路径，但这会要求 URL 有一个尾部斜杠（即/overview/tool/），我认为您不希望这样.

---

还建议从您的 details 路由中删除名称，而是链接到默认子路由（即 overview）。例如

<router-link :to="{ name: 'overview', params: { tool } }">{{id}}</router-link>

否则，路由器会混淆显示哪个，父（空）或子。

您的侧边栏链接可以简单地使用子路由名称来创建它们的链接，例如

<nav>
  <ul>
    <li>
      <router-link :to="{name: 'overview'}">Overview</router-link>
    </li>
    <li>
      <router-link :to="{name: 'commits'}">Commits</router-link>
    </li>
    <li>
      <router-link :to="{name: 'files'}">Files</router-link>
    </li>
  </ul>
</nav>