Vue Router -如何实现这种类型的路由？

Question

我是Vue的新手，我正在构建一个带有侧边菜单的Vue应用程序，它可以让用户浏览网站。

我使用的是Vue Router，代码如下

<template>
  <div id="app">

    <Header />

    <SideMenu
      active="0"
    />

    <router-view/>

  </div>
</template>

当用户单击其中一个SideMenu链接时，它转到另一个路由，内容将在SideMenu旁边生成，而无需再次加载它们。

如果我想要一个没有侧边菜单和标题的/login路由怎么办？

我是否必须这样做，然后在每个路由视图中移动标题和菜单组件？

<template>
  <div id="app">

    <router-view/>

  </div>
</template>

通过这样做，每次用户点击链接时，标题和菜单都会再次加载，导致应用程序变慢。

我能做什么?

(我可以将路由器视图移动到另一个视图中吗？)

Answer 1

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')
    }
  ]
}