美文网首页Vue
Vue二级路由配置

Vue二级路由配置

作者: xlayzheng | 来源:发表于2017-12-29 18:07 被阅读194次
  • 二级路由配置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>

相关文章

  • vue二级路由的设置

    项目当中使用vue的时候一定会用到路由,并且二级路由甚至三集路由的需求都是刚需,当然,多级路由的配置方法和二级的是...

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

  • vue-router常用配置

    本文介绍了在vue-cli中常用的router配置:1.在router/index.js中配置路径 设置二级路由需...

  • Vue二级路由配置

    二级路由配置path时前面不能有 ' / ' 在一级路径信息数组中添加一个children配置项: 在一级路由的模...

  • Vue中展示二级路由的默认模块/二级路由默认显示

    二级路由配置: 1.新建一个二级路由 导入到router/index.js 并配置 2.在盛放子路由的页面加入ro...

  • Vue路由

    一、Vue路由基础用法: 二、Vue路由配置的抽出 三、路由动态传值: 四、路由的跳转方式: 五、路由的hash模...

  • 6、路由跳转之二级路由children的实现入门版

    在vue项目中,经常会用到路由跳转,二级路由更是必须要掌握的,下面给大家分享一下二级路由是实现二级路由是建立在一级...

  • Vue 基础 - 前端路由

    使用vue-router实现前端路由 安装vue-router: 配置路由文件,并在vue实例中导入: 设置视图(...

  • Vue-Router路由

    一、Vue路由配置 1、安装 2、引入vue-router并注册路由(以下步骤都在main.js里面) 3、配置路...

  • vue路由配置、跳转、传参

    一、vue路由 1、路由配置文件 (1)在router.js中导入Vue和VueRouter (2)Vue调用Vu...

网友评论

    本文标题:Vue二级路由配置

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