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

问题描述

我对 Vue 路线有点陌生。我有一张桌子Home.vue，每一行都有一个按钮，以便转到详细信息。我会试着解释我的想象。我希望重定向打开一个Overview带有侧边栏的新屏幕，其中包含 3 个选项Overview：Commits和Files. 我的问题是要了解什么应该是父母，什么应该是孩子。我确定CommitsandFiles是孩子，但Overview也应该是孩子或Commitsand的父母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。但是我有两个问题。Overview第一个是当我从桌子移动到时如何加载DetailsChildren？第二个是我希望路线是/overview/:tool. 我有点困惑。在这种情况下处理路线的最佳方法是什么？

标签： vuejs2vue-componentvue-router

解决方案

您想要做的是在您的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

请参阅嵌套路由指南。

您可能认为您可以为概览路径使用空路径，但这将要求 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>

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

问题描述

解决方案

推荐阅读