如何规划具有单独部分的页面的路线

Question

全部：

我在Vue.js中有一个页面应用程序，该页面基本上分为左右两个部分。这两个部分目前没有交互

我想知道如何为这种布局规划路线（设置路由器），以便每个部分都可以管理其视图？

Answer 1

您绝对可以看一下嵌套路由。 VueRouter Nested Routes

您的父路由将是整个包装器/容器的路由器视图。您的子路线将是处理各个部分的路线。

您可以根据项目要求或标准将<router-view/>多次包装在一个组件中

---

以上概念的示例：

Routes.js

/profile-这将渲染容器和包装器

/profile/resume-假设简历将显示在列的右侧

Profile.vue

<div>
  <div class="column-1">Column 1</div>
  <div class="column-2>
    // Column 2
    <router-view/> // /profile/resume
  </div>
</div>

然后将Profile.vue包装到您的主要组件中，主要是App.vue

App.vue

<template>
  <router-view/>
</template>

---

*使用的组件名称仅是提示性的。