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

思路

1、首先获取后台返回的路由表如图结构
image.png
然后保存在 state里。
在permission里触发,然后在main里引入。代码如下所示

前端解析后的路由

首页
image.png

其他页面
image.png

存在问题

添加路由成功后首页不显示,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()
阅读 5.9k
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)
  })
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题