VUE学习记录（二）antd design 刷新后导航菜单与当前页面保持同步

一、保持菜单选中同步

1.保持菜单的key值与路由相同

`   <a-menu-item key="/WorkBench">
         <router-link to="/WorkBench" tag="div">
         <a-icon type="bank" /><span>工作台</span></router-link>
    </a-menu-item>`

2.设置defaultselected的值为当前路由，在data中设置路由为【this.$route.path】

 <a-menu
          mode="inline"
          :default-open-keys="openkeys"
          :default-selected-keys="defaultSelectedKeys"//data中设置defaultSelectedKeys路由 
          :style="{ height: '100%', borderRight: 0 }"
        >

二、保持菜单展开同步

1.在路由设置中设置属性module，这里设置的与展开菜单的内容一致

{
                    path: '/WorkBench',
                    name: 'WorkBench',
                    component: WorkBench,
                    meta: {
                        module: '概览',
                        title: '工作台'
                    }
                },

2.原理与一相同，将默认展开值defaultopenkey设置为module

  data() {
            return {
                collapsed: false,
                selectedKeys:[],
                openkeys:[this.$route.meta.module],//刷新默认展开菜单
                defaultSelectedKeys:[this.$route.path],//刷新默认选择菜单
            };
        },

三、注意

不要写错！！！
不要写错！！！
不要写错！！！
不要写错！！！
不要写错！！！