美文网首页
Vue中展示二级路由的默认模块/二级路由默认显示

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

作者: Nosaj | 来源:发表于2018-04-19 11:26 被阅读0次
    二级路由配置:

    1.新建一个二级路由 导入到router/index.js 并配置

    import Vue from 'vue'
    import Router from 'vue-router'
    import goodinfo from '../components/goodinfo' //盛放子路由的页面
    import detail from '../components/children/detail'//子路由
    export default new Router({
      routes: [
        {path:'/goodinfo',name:'goodinfo',component:goodinfo,children:[
            {path:'/detail',component:detail}
          ]
        },
      ]
    })
    

    2.在盛放子路由的页面加入router-link 与 router-view标签

    <router-link to="/detail"><button type="button" class="btn btn-link">Details</button></router-link>
    <div class="tabBox">
        <router-view></router-view>
    </div>
    

    3.点击带有router-link标签的按钮即可展示子路由


    image.png

    但是重新进入页面的时候这个子路由是不会自动展示的

    该怎么解决?

    "redirect"

    import Vue from 'vue'
    import Router from 'vue-router'
    import goodinfo from '../components/goodinfo'
    import detail from '../components/goodinfodetails/detail'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {path:'/goodinfo',name:'goodinfo',component:goodinfo,children:[
            {path:'/detail',component:detail},
            {path:'/review',component:review}
          ],redirect:'/detail'//在children的后面加一个redirect:'/想要默认展示的子路由名字'
        },
      ]
    })
    
    

    这样就大功告成了!页面每次刷新都会默认展示redirect设置后的子路由

    相关文章

      网友评论

          本文标题:Vue中展示二级路由的默认模块/二级路由默认显示

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