Vue 中的 路由显示问题

Question

问题描述
首先再 App.vue 中有一个router-view，代码如下

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

然后路由显示为到Main.vue

export const mainRouter = {
  path: '/',
  name: 'main',
  component: Main
}

然后在 Main.vue中也有一个router-view，代码如下

        <div class="nav-content">
          <nav>
            <router-link :to="{name:item.routerUrl}" tag="li" :key="item.name" v-for="item in menuList">
              <span class="nav-item">{{item.name}}</span>
            </router-link>
          </nav>
        </div>

    <div class="content">
      <router-view></router-view>
    </div>

然后如何让在 Main.vue上的router-link点击后的页面显示在 Main.vue中的router-view上呢？
PS：现在点击后显示在App.vue中的router-view上

Answer 1

指定router-view name属性