vue动态路由搭建后界面出不来

Question

搭建一个vue2的动态路由框架，现状是动态路由能添加成功，但是界面出不来。如下

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store';
import NProgress from 'nprogress' //导航条
import "nprogress/nprogress.css"//导航条样式
import { Message } from 'element-ui'
import { setData1, getData1 } from '@/utils/cache'
import login from '@/views/login'
Vue.use(VueRouter)

// 解决编程式路由往同一地址跳转时会报错的情况
// const originalPush = VueRouter.prototype.push
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch(err => err)
// }
//静态路由
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: '登录',
    component: login
  },
]

const router = new VueRouter({
  routes
})
// 解析路由
function setChild(me, routerList, rootName, rootPath) {
  rootName = rootName + '/' + me.name
  rootPath = rootPath + '/' + me.path
  if (me.children != null && me.children != [] && me.children.length > 0) {
    //如果有下层
    me.children.forEach(node => {
      setChild(node, routerList, rootName, rootPath)
    })
  } else {
    //没有下层则说明这是一个路由
    let rou = {
      name: rootName,
      path: rootPath,
      component: () => import('@/views' + rootPath)
    }
    routerList.push(rou)
  }

}

let isAddRoute = true  //阀门变量 避免重复添加
router.beforeEach(async (to, from, next) => {
  console.log(to);
  if (isAddRoute && store.state.routers.length != 0) {
    let dynamicRoutes = await JSON.parse(JSON.stringify(store.state.routers))
    //添加动态路由
    let routerList = []
    dynamicRoutes.forEach(v => {
      setChild(v, routerList, '', '')
    })
    let initHome = {
      path: '/home',
      name: 'home',
      meta: {
        name: 'home',
      },
      component: () => import('@/views/home'),
      children: dynamicRoutes
    }
    router.addRoute(initHome);
    router.addRoute({
      path: '*',
      hidden: true,
      component: () => import( /* webpackChunkName: "error" */ '@/views/error'),
      name: '404',
    })
    console.log(router.getRoutes());
    isAddRoute = false //关闭阀门，否则会一直循环崩溃
    next({ ...to, replace: true })  // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
  } else {
    next()
  }
})

router.afterEach((to, from) => {
  NProgress.done()
  window.scrollTo(0, 0)
  if (to.name) {
    document.title = to.name
  }
})

export default router

Answer 1

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：根据你提供的代码，似乎出现问题的地方在于动态路由的组件路径设置。在 setChild 函数中，你使用了如下代码来设置路由的组件：

let rou = {
  name: rootName,
  path: rootPath,
  component: () => import('@/views' + rootPath)
}

这个代码中，rootPath 是路由的路径，而 @/views 则是你的组件所在的根目录。因此，你期望的组件路径应该是 @/views${rootPath}，而不是 @/views${rootPath}。这个问题可能会导致找不到组件而导致界面无法展示。
你可以尝试修改这个代码，将 '@/views' + rootPath 改为 '@/views' + rootPath + '.vue'，以明确指定组件的路径。例如：

let rou = {
  name: rootName,
  path: rootPath,
  component: () => import('@/views' + rootPath + '.vue')
}

另外，你也可以在浏览器控制台中查看网络请求，以确定是否成功加载了组件。如果组件加载失败，可能会在网络请求中看到错误信息，从而帮助你更好地定位问题。
以下是 setChild 函数的修改后的完整代码：

function setChild(me, routerList, rootName, rootPath) {
  rootName = rootName + '/' + me.name
  rootPath = rootPath + '/' + me.path
  if (me.children != null && me.children != [] && me.children.length > 0) {
    //如果有下层
    me.children.forEach(node => {
      setChild(node, routerList, rootName, rootPath)
    })
  } else {
    //没有下层则说明这是一个路由
    let rou = {
      name: rootName,
      path: rootPath,
      component: () => import('@/views' + rootPath + '.vue')
    }
    routerList.push(rou)
  }
}

在这个代码中，我们将路由组件路径的拼接修改为了 '@/views' + rootPath + '.vue'，以确保能够正确地加载组件。其他部分的代码和之前的版本相同。
请注意，这个修改只是针对路由组件路径的问题，如果问题仍然存在，可能需要进一步排查其他可能的原因，例如路由配置、组件代码等。希望这些信息能够帮助你解决问题。

---

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢