Vue 中的 路由显示问题

问题描述
首先再 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上

指定router-view name属性

div#app 下面有一个router-view, 它显示main, 然后在main.vue中，它又有一个router-view, 很明显，这是一个子路由了，先进入到main, 然后进入到main 里面的router-view, 你要配置子路由，然后main.vue中的router-link的to属性都指向子路由

配置的时候配置路由+自路由这样就可以实现自路由页面跳转

为Main.vue中的router-view指定一个name属性，如mainView

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

路由如下配置，设置名字为mainView

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

详见官方文档：Vue Router 命名视图