router-view及路由配置问题

业务场景:主页有选项卡,使用router-view做不同页面显示

问题:在index页面写了个router-view(app页面也有个router-view),之后要怎么配置使其正常显示

使用工具:ant-design-vue2.0 vue-cli4
index.vue

 <!-- 菜单栏 -->
        <a-menu v-model:selectedKeys="a" mode="horizontal">
          <a-menu-item key="recent_sign">
          
            <router-link to="/a">A</router-link>
          </a-menu-item>
          <a-menu-item key="b">
            <!-- <appstore-outlined /> -->
            <!-- <UserOutlined /> -->
            <router-link to="/b">B </router-link>
          </a-menu-item>
        </a-menu>
        <router-view name="IndexView" />
        export default defineComponent({
  components: {
    
  },
  name: "",
  setup() {
    const current = ref(["a"]);
    return {
      current,
    };

  },
});
</script>
        

A.vue

<template>
  <div>
    <a-row class="current-sign-box">
      <a-col
        :sm="{ span: 18, offset: 3 }"
        :md="{ span: 18, offset: 3 }"
        :lg="{ span: 16, offset: 4 }"
        :xl="{ span: 16, offset: 4 }"
      >
        <!--   暂无信息-->
        <div id="content1">
          <a-empty />
        </div>
        <!--  -->
        <div id="content2"></div>
        <!--   -->
        <div id="content3"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  defineComponent, ref,
  reactive,
} from "vue";

export default defineComponent({
  components: {
  
  },
  name: "",
  setup() {
    return {
    };

  },
});
</script>

router index.js

 {
    path: '/index',
    name: 'Index',
    component: Index,
    redirect: '/a',
    children: [
      // 重定向到
      {
        path: "/",
        redirect: "/a"
      },
      {
        path: '/a',
        // 单个router-view用:component
        component: A,
        meta: {
          title: '近期报考'
        }
      
      }
    ],
    meta: {
      title: "首页",
     
    }
  },
阅读 2k
1 个回答

vue-router官方的嵌套路由就是一个很典型的示例呀:
https://router.vuejs.org/zh/g...

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>
    <router-link to="/user/foo/posts">/user/foo/posts</router-link>
  </p>
  <router-view></router-view>
</div>
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },
                
        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题