AntDesign vue Layout 使用路由實現菜單切換

實現點擊左側菜單，右側菜單切換到對應的內容

定義嵌套路由

修改/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" style="min-height: 100vh">
        <!--側邊欄容器-->
        <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 style="background: #fff; padding: 0" />
            <!--右邊內容-->
            <a-layout-content style="margin: 0 16px">
                <!--內容頭部title-->
                <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>User</a-breadcrumb-item>
                    <a-breadcrumb-item>Bill</a-breadcrumb-item>
                </a-breadcrumb>
                <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                    <!--定義路由出口-->
                    <router-view/>
                </div>
            </a-layout-content>
            <!--右邊頁腳-->
            <a-layout-footer style="text-align: center">
                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) {
  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)
})

推薦第二種