javascript - vue-router子路由默认视图不显示

问题描述

问 题

1. 路由结构

    {
      path: '/my',
      name: 'my',
      component: require('./components/my.vue'),
      children:[
        {
          path: '/',
          name: 'cr',
          component: require('./common/vue/table.vue'),
        },
        {
          path: 'dt',
          name: 'dt',
          component: require('./common/vue/table.vue'),
        }
      ]
    }

2.视图结构

一级路由

          <li><router-link :to="{name:'home'}" tag="a">待支付订单</router-link></li>
          <li><router-link :to="{name:'all'}" tag="a">所有订单</router-link></li>
          <li><router-link :to="{name:'my'}" tag="a">我的债权</router-link></li>
          <li><router-link :to="{name:'apply'}" tag="a">申请债权</router-link></li>

二级路由

        <span style="margin-left: 30px"><router-link :to="{name:'cr'}">债权方</router-link></span>
        <span><router-link :to="{name:'dt'}">债务方</router-link></span>

3.警告提示

[vue-router] Named Route 'my' has a default child route.
          When navigating to this named route (:to="{name: 'my'"), the default child route will not be rendered.
          Remove the name from this route and use the name of the default child route for named links instead.

4.最后出现了子路由的默认视图不显示，但是也没有报错，想问下这到底是哪有问题

解决方案

要有默认子路由，那父路由的名字name得去掉

这篇关于javascript - vue-router子路由默认视图不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！