业务场景:主页有选项卡,使用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: "首页",
}
},
vue-router官方的嵌套路由就是一个很典型的示例呀:
https://router.vuejs.org/zh/g...