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

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>

---

* 使用的组件名称仅供参考。