总结:写路由路径的时候一定要找对地址路径
一个bug找了半天,太不容易了,我来记录一下,希望以后大家也少走弯路.

在这里插入图片描述

二级路由代码:
helloworld.vue

 <div class="h_b">
      <ul class="ull">
        <!-- 遍历导航 -->
        <router-link to="/HelloWorld/acc" tag="li">
          <div class="children">猜你喜欢</div>
        </router-link>
        <router-link to="/HelloWorld/b" tag="li">
          <div class="children">我是b组件</div>
        </router-link>
        <router-link to="/HelloWorld/c" tag="li">
          <div class="children">我是c组件</div>
        </router-link>
      </ul>
    <router-view></router-view>
    </div>

router文件下index.js

//这里
 {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld'], resolve),
      children: [
        {
          path: 'acc',
          component: resolve => require(['@/page/acc'], resolve),//路由懒加载
        },
        {
          path: 'b',
          component: resolve => require(['@/page/bcc'], resolve),
        },
        {
          path: 'c',
          component: resolve => require(['@/page/c'], resolve),
        },
      ]
    },

index.js里面引入的路由地址要按照自己的路径地址更改哦。
我创建的是page下(acc.vue和bcc.vue和c.vue)
效果图:
在这里插入图片描述
其它切换的我就不切图了,根a组件一样,希望对大家有帮助.🤭

Logo

前往低代码交流专区

更多推荐