动态路由 addRoute后首页不显示原因

Question

思路

1、首先获取后台返回的路由表如图结构

然后保存在 state里。
在permission里触发，然后在main里引入。代码如下所示

前端解析后的路由

首页

其他页面

存在问题

添加路由成功后首页不显示，dom没有渲染

main.js 入口文件引入了 动态路由的方法

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// permission文件为添加动态路由方法
import './utils/permission'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

permission.js 部分代码

import store from '@/store'
import router from '@/router'
async function getRoute() {
  await store.dispatch('getRoutesList')

  const routeList = store.getters.routesList
  routeList.forEach(item => {
    router.addRoute('HomePage', item)
  })
}
getRoute()

Answer 1

查看route接受的类型会发现其接受一个同步或者异步组件组件，而你你component类型为string

import { Component } from 'vue'
export type Lazy<T> = () => Promise<T>
export type RouteComponent = Component
export type RawRouteComponent = RouteComponent | Lazy<RouteComponent>

//addRoute参数类型
export interface RouteRecordSingleView extends _RouteRecordBase {
  component: RawRouteComponent
  //...
}

所以要解决这个问题你可以尝试

import CompB from '组件b的地址'
const components = {
  //异步组件
  a: () => require('组件a的地址'),
  //同步组件
  b: CompB
}

async function getRoute() {
  await store.dispatch('getRoutesList')

  const routeList = store.getters.routesList
  routeList.forEach(route => {
    //获取对应的component
    route.component =components[route.component]
  })
  routeList.forEach(item => {
    router.addRoute('HomePage', item)
  })
}