美文网首页
[vue-router] Named Route 'Mine'

[vue-router] Named Route 'Mine'

作者: 很好就这样吧 | 来源:发表于2021-10-26 20:29 被阅读0次

    控制台警告


    翻译:
    1、命名路由“Mine”具有默认子路由。当导航到此命名路由(:to=“{name:‘Mine’”)时,将不呈现默认子路由。从该路由中删除该名称,并改用命名链接的默认子路由的名称。
    2、重复命名路由{ name: "MyAccount", path: "/mine/myAccount" }

    {
        path: '/mine', // 个人中心
        name: 'Mine',
        component: () => import('@/views/Mine.vue'),
        children: [
          {
            path: '/',   //想要个人中心默认展示MyAccount子页面
            name: 'MyAccount',
            component: () => import('@/components/mine/MyAccount.vue'),
          },
          {
            path: 'myAccount',
            name: 'MyAccount',
            component: () => import('@/components/mine/MyAccount.vue'),
          },
          {
            path: 'myAddress',
            name: 'MyAddress',
            component: () => import('@/components/mine/MyAddress.vue'),
          }
        ]
      }
    

    3个页面路径如下:
    http://localhost:8081/mine
    http://localhost:8081/mine/myAccount
    http://localhost:8081/mine/myAddress

    这种情况一是MyAccount出现了重复,二是默认子路由写法不对,可以改为如下

      {
        path: '/mine', // 个人中心
        name: 'Mine',
        component: () => import('@/views/Mine.vue'),
        children: [
          {
            path: '/mine', //想要个人中心默认展示MyAccount子页面
            name: 'MyAccount0',
            component: () => import('@/components/mine/MyAccount.vue'),
          },
          {
            path: '/mine/myAccount',
            name: 'MyAccount',
            component: () => import('@/components/mine/MyAccount.vue'),
          },
          {
            path: '/mine/myAddress',
            name: 'MyAddress',
            component: () => import('@/components/mine/MyAddress.vue'),
          }
        ],
      },
    

    相关文章

      网友评论

          本文标题:[vue-router] Named Route 'Mine'

          本文链接:https://www.haomeiwen.com/subject/lqmyaltx.html