小项目 vue-router 动态添加

需求：项目中设计一个动态的后台数据 对应项目中的一个页面 所以需要动态生成一些页面 那么问题来了！ 1.怎么动态添加路由？ 2.怎么动态创建组件？

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue-router 怎么实现动态注册路由

在vue-Router 官方文档中 router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

==注意：这里的routes选项一定不能重复，否则前一次注册的路由会失效==

路由

1.选择使用 pinyin 插件 (https://github.com/yoshixmk/pinyin)

  const a = pinyin(componentName, {
          style: pinyin.STYLE_NORMAL
        }).join('')

2.拼接路由字符串，挂载到路由上

      const str = '/' + a + '/:channalId'
       this.$router.options.routes[0].children.push({ // 插入路由
          path: str,
          component: componentA// 此时创建了新的组件
        })
      this.$router.$addRoutes(this.$router.options.routes)

组件

1.组件中考虑到不同的数据对应不同的页面，但是路由挂载时并不能判断路由与组件的对应关系，
  所以将组件全部封装在一个组件中 

//组件思路就是 v-if v-else-if v-else
     <div class="listbox" v-if="islistshow"></div>
    <!-- 方块 -->
    <div class="cubebox" v-else-if="iscubeshow"></div>
    <!-- 文章 -->
    <div class="artbox" v-else-if="isartshow"></div>

2.进行优化 不同的盒子不同的动画入场 ，代码简单 不敲了

总结

动态添加路由，需要处理好组件的逻辑以及路由的注册。此次代码思路较为清晰，依旧有些赘余！