Vue 中的 路由显示问题 5C

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

4个回答

指定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 命名视图

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问