刘勇虎的官方网站

使用相关技术

• vuejs

事情经过

昨天上午去打疫苗了，组内小弟自己建了项目路由，自己对于这个新项目不是特别熟悉，想着建就建了，省的自己费心看了。

下午回公司，指导着小弟调整了下项目结构。合并代码，就快下班了，找架构大哥聊会。

小弟来了，感觉事情不对，项目不能正常加载组件。

回工位，仔细看代码。小弟设置的路由是这样的：

   {
    path: '/path0',
    component: Layout,
    redirect: '/path0/path1',
    children: [
      {
        path: 'path1',
        children: [
          {
            path: 'path1.1',
            component: () =>
              import('@/views/path0/path1/path1.1'),
            name: 'path1.1',
            meta: { title: '监测', noCache: true }
          },
          {
            path: 'path1.2',
            component: () =>
              import('@/views/path0/path1/path1.2'),
            name: 'path1.2',
            meta: { title: '计划', noCache: true }
          },
          {
            path: 'path1.3',
            component: () =>
              import('@/views/path0/path1/path1.3'),
            name: 'path1.3',
            meta: { title: '维护', noCache: true }
          }
        ]
      }
    ]
  },

表现：

1. 正常加载项目不报错
2. 点击多级菜单正常跳转不报错
3. 不能正常显示需要加载的组件

分析解决：

1. 管理系统的人员菜单是从后端获取的并且分配好的页面路径（虽然我感觉多此一举，旧项目遗留，暂且如此）

2. 在确定分配的人员路径没有错误的前提下，返回查看路由。

• 2.1 第一层级

   path: '/path0',  // 路径
   component: Layout, // 加载组件
   redirect: '/path0/path1', // 重定向

貌似没有错

• 2.2 第二层级

 children: [ // 子页面
      {
        path: 'path1', // 路径
        children: [ // 子页面

缺少了 1） 重定向 2）组件

调整代码如下：

   
children: [
      {
        path: 'path1',
        redirect: '/path0/path1/path1.1',
        component: () => import('@/views/path0/index'),
        children: [

component： @/views/path0/index/index.vue

<template>
  <router-view :key="key" />
</template>

<script>
export default {
  computed: {
    key() {
      return this.$route.path
    }
  }
}
</script>

<style>
</style>

重新编译，表现正常。

以上，完结。