Vue Маршрутизатор - Как я могу реализовать этот тип маршрута? - PullRequest
Новая
       16

Vue Маршрутизатор - Как я могу реализовать этот тип маршрута?

2 голосов
/ 03 августа 2020

Я новичок в Vue, и я создаю приложение Vue с боковым меню, которое позволяет пользователю перемещаться по веб-сайту.

Я использую Vue Router, а код выглядит следующим образом 

<template>
  <div id="app">

    <Header />

    <SideMenu
      active="0"
    />

    <router-view/>

  </div>
</template>

I, когда пользователь нажимает на одну из ссылок SideMenu, он переходит на другой маршрут, и контент создается рядом с SideMenu без повторной загрузки.

Что если бы я хотел иметь маршрут / login без бокового меню и заголовка?

Нужно ли мне это делать, а затем перемещать компоненты заголовка и меню внутри каждого представления маршрута? 

<template>
  <div id="app">

    <router-view/>

  </div>
</template>

Делая это каждый раз, когда пользователь щелкает ссылку, заголовок и меню загружаются снова, что приводит к замедлению работы приложения.

Что я могу сделать? Посмотреть?)

1 Ответ

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

Это описано в документации vue router. Вы можете «связать» макеты, определив маршруты, как в примере ниже. Каждый Vue -компонент по пути должен реализовать элемент router-view для фактического отображения следующего содержимого. 

{
  path: '/login',
  component: () => import('layouts/AuthLayout.vue'),
  children: [
    {
      path: '',
      name: 'login',
      component: () => import('pages/Login.vue')
    }
  ]
},
{
  path: '/',
  component: () => import('layouts/MainLayout.vue'),
  children: [
    {
      path: '',
      name: 'dashboard',
      component: () => import('pages/Dashboard.vue')
    }
  ]
}
...