vue router children 路由变了 组件没变_Vue 如何根据路由动态生成界面

Vue 如何根据路由动态生成界面

这两天有这么一个需求，需要根据路由动态生成界面，这个在前后端不分离的项目中应该很容易实现，但是在vue中就需要好好思考一下了。

看了一些资料，最终还是实现了这个功能， 思路如下：

1. 首先需要一个接口来获取需要生成的界面路由。

2. 遍历这些路由，将这些路由拼接到存量路由中。

3. 遍历拼接好的路由，根据router.name 或 router.component，动态加载相应的组件。

4. 声明一个全局组件，当路由匹配不到name或component的时候，加载全局组件。

示例代码如下：在main.js 中请求，因为赶进度，代码写的比较辣鸡，只提供思路，代码可以根据实际情况自己组装。

api.getStaticHtml().then(({data})=>{  if(data.code == 1){    data.data.forEach(item=>{      defaultRoutes.push({        path:`/${item.ad_code.replace('open-html-','')}`,        name:`${item.ad_code.replace('open-html-','').toUpperCase()}`      })    })    console.log('defaultRoutes',defaultRoutes)        defaultRoutes.forEach(router => {      if (router.component) {        // console.log('router.component',router)        const component = router.component        // console.log('-----','../src/views/' + router.name + '.vue')        router.component = () => import(`./views/${router.name }.vue`)      } else if (router.template) {        router.component = resolve => {          resolve({            template: router.template          })        }      } else {                const component = `${router.name}/index`                if(!router.name){                    router.component = () => import(`./views/forum/index.vue`)        }else{                    router.component = async resolve => {            resolve({              template: ` `            })          }        }      }        let children = router.children      if (children && children instanceof Array) {        children = formatRoutes(children)      }        router.children = children        // fmRoutes.push(router)        // addRouters.push(r)      // return fmRoutes    })    let router = new VueRouter({      mode: 'hash',      base: process.env.BASE_URL,      routes: defaultRoutes    })    new Vue({      router,      store,      render: h => h(App)    }).$mount("#app");  }else if(data.code == 99){        let router = new VueRouter({      mode: 'hash',      base: process.env.BASE_URL,      routes: defaultRoutes    })    new Vue({      router,      store,      render: h => h(App)    }).$mount("#app");    store.commit('setShowLogin',true)  }});

使用场景

某些界面需要从后台富文本配置，并且在前端动态展示时，就可以使用这个方法。

关注我 一起回忆 《javaScript高级程序设计》《javaScript设计模式中》你没注意过的细节