AntDesignvueLayout使⽤路由实现菜单切换实现点击左侧菜单，右侧菜单切换到对应的内容
定义嵌套路由
修改/src/router/index.js
const routes = [
{
path: '/',
name: 'layout',
component: () => import(/* webpackChunkName: "about" */ '../views/Layout.vue'),
//定义嵌套路由
children:[
{
path: '/admin',
name: '管理员页⾯内容组件',
component: () => import(/* webpackChunkName: "about" */ '../views/Admin.vue'),
},
{
path: '/role',
name: '⾓⾊页⾯内容组件',
component: () => import(/* webpackChunkName: "about" */ '../views/Role.vue'),
},
{
path: '/admin',
name: '菜单页⾯内容组件',
component: () => import(/* webpackChunkName: "about" */ '../views/Menu.vue'),
},
]
}
]
在Layout 中使⽤
index/src/views/Layout.vue
<template>
<!--顶级Laytou 容器-->
<a-layout id="components-layout-demo-side" >
<!--侧边栏容器-->
<a-layout-sider v-model="collapsed" collapsible>
<!--logo-->
<div class="logo">
<img src="../assets/avatar.jpg" class="circleImg">
</div>
<!--
:default-selected-keys="['1']"  初始选中的⼦菜单想
mode  菜单模式  inline为内嵌模式
-->
<a-menu theme="dark" :default-selected-keys="['1']" mode="inline">
<!--⼀级菜单-->
<a-sub-menu key="sub1">
<span slot="title">
<a-icon type="setting" theme="filled" />
<span>系统管理</span>
</span>
<!--⼆级菜单路由嵌套跳转-->
<a-menu-item key="1" @click="changeMenu('admin')">
管理员
</a-menu-item>
<a-menu-item key="2" @click="changeMenu('role')">
⾓⾊
</a-menu-item>
<a-menu-item key="3" @click="changeMenu('admin')">
菜单
</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<!--右边主要内容-->
<a-layout>
<!--右边头部-->
<a-layout-header />
<!--右边内容-->
<a-layout-content >
<!--内容头部title-->
<a-breadcrumb >
<a-breadcrumb-item>User</a-breadcrumb-item>
<a-breadcrumb-item>Bill</a-breadcrumb-item>
</a-breadcrumb>
<div :>
<!--定义路由出⼝-->
<router-view/>
</div>
</a-layout-content>
<!--右边页脚-->
<a-layout-footer >
ThinkPHP5.1_vue2.x_Base-admin ©2020 Created by makalo
</a-layout-footer>
</a-layout>
</a-layout>
</template>
<script>
export default {
data() {
return {
collapsed: false,
};
},
methods: {
//路由内容切换
changeMenu(route){
console.log(route)
//获取路由对象并切换
this.$router.push(route)
}
}
};
</script>
<style>
/*logo 样式*/
/*#components-layout-demo-side .logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}*/
/*logo 圆⾓*/
.circleImg{
border-radius: 30px;
width:60px;
height:60px;
}
</style>
index/src/views/Admin.vue
<template>
<div>admin </div>
</template>
<script>
export default {
name: "Admin"
}
</script>
<style scoped>
</style>
效果
Vue 重复点击相同路由报错的问题
出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
重复点击导航时，控制台出现报错，虽然不影响功能使⽤，但也不能视⽽不见。
解决⽅案：
⽅案⼀：只需在 router ⽂件夹下，添加如下代码：
// src/router/index.js
Vue.use(Router)
const router = new Router({
routes
})
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
antdesignvue 配置外部文件return VueRouterPush.call(this, to).catch(err => err)
}
⽅案⼆：在跳转时，判断是否跳转路由和当前路由是否⼀致，避免重复跳转产⽣问题。//路由内容切换
changeMenu(route){
if(this.$route.path !== route){
//获取路由对象并切换
this.$router.push(route)
}
}
⽅案三：使⽤ catch ⽅法捕获 router.push 异常。
this.$router.push(route).catch(err => {
console.log('输出报错',err)
})
推荐第⼆种