后台项目搭建记录-02

后台项目搭建记录-01：https://blog.csdn.net/thingir/article/details/108620608

02篇记录了如何使用 路由 结合 iview 的Menu组件来实现左侧菜单效果的，效果如下：

1. 定义路由

上一篇记录使用了遍历文件夹的方式来定义routes;

这篇使用一下的方法，丰富一下routes的定义方式。

路由配置如下：

const routes = [
  {
    //首页组件
    path: '/',
    redirect: '/index',
    title:'首页',
    component: resolve => require(['../views/pages/home.vue'], resolve),
    meta: {title: '首页'},
    children: [
      {
        path: '/index',
        title:'关注',
        component: resolve => require(['../views/pages/jcxx/jcxx.vue'], resolve),
        meta: {title: '关注'}
      },
      {
        // 个人中心组件
        path: '/u',
        title:'个人中心',
        component: resolve => require(['../views/pages/jcxx/jcxx.vue'], resolve),
        meta: {title: '个人中心'}
      }
    ]
  },
]

问题1：当同一菜单点击两下时，会报错

解决1：经过百度后，解决方法如下 ，了解详细原因参见https://blog.csdn.net/weixin_43202608/article/details/98884620

//1.使用插件
Vue.use(vueRouter);
//点击路由跳转相同地址报错,解决方法
const originalPush = vueRouter.prototype.push;
vueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
};

2.使用递归组件实现左侧菜单

参考文章：https://juejin.im/post/6844903792673062919

知识点：组件可通过name来调用自身，使用时要确保递归调用的条件性(使用最终会得到 false 的 v-if)，否则会导致无限循环

详细可参考官网：https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6

组件结构如下：

SidebarMenuItem.vue中使用递归调用

sidebarMenu.vue中引用递归组件 

使用：

 <SidebarMenu ref="side_menu" :menuList="menuList" :openNames="openNames" :activeNames="activeNames"  @on-select="clickMenu"></SidebarMenu>
        

到此 我想要的效果就实现了。。。