Vue二级路由配置

  • 二级路由配置path时前面不能有 ' / '
  • 在一级路径信息数组中添加一个children配置项：
       {path:'/hot',component:Hot,
             children:[
              {path:'/',redirect:'film'},                  //配置默认显示模板内容
              {path:'film',component:{template:'<p>妖猫传</p>'}},
              {path:'tv',component:{template:'<p>河神</p>'}},
              {path:'music',component:{template:'<p>缘分一道桥</p>'}}
             ]
        }
  • 在一级路由的模板中添加<router-link to=''></router-link>,to中的地址需要 加上一级路由
  • 供二级路由对应模板显示的<router-view></router-view>也不能忘！
<template id="hot">
        <div class="hotWrap">
                <h2>Hot</h2>
                <router-link to="/hot/film">film</router-link>
                <router-link to="/hot/tv">tv</router-link>
                <router-link to="/hot/music">music</router-link>
                <router-view></router-view>
        </div>
</template>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容