Как лучше всего использовать vue маршрутов? - PullRequest
Новая
       87

Как лучше всего использовать vue маршрутов?

1 голос
/ 06 августа 2020

Я немного новичок в Vue маршрутах. У меня есть таблица в Home.vue, и в каждой строке есть кнопка для go подробностей. Я постараюсь объяснить, что я себе представляю. Я хочу, чтобы перенаправление открывало новый экран 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. Но тут у меня две проблемы. Во-первых, как я загружаю Overview при переходе от таблицы к DetailsChildren? Во-вторых, я хочу, чтобы маршрут был /overview/:tool. Я немного запутался. Как лучше всего обрабатывать маршруты в этой ситуации?

1 Ответ

1 голос
/ 06 августа 2020

Что вы хотите сделать, так это иметь трех дочерних элементов по вашему маршруту 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

См. Руководство по Вложенные маршруты .

Вы можете подумать, что можете использовать пустой путь для маршрута overview , но тогда в URL-адресе должен быть конечный sla sh (ie /overview/tool/), и я решил, что вы не хотите это.

Также рекомендуется удалить имя из маршрута подробности и вместо этого указать ссылку на дочерний маршрут по умолчанию (ie обзор ). Например, 

<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>

Править loving-dawn-octf3

...