美文网首页
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路由默认子路由

    在vue路由中,如果存在二级路由的话,那么该路由下的所有子路由默认都不会自己显示的,如果想要默认展示子路由的话就需...

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

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

  • Vue路由基础知识点

    vue构建 router-link实现跳转 $router事件跳转 无用户输入地址时的默认展示组件 二级、三级路由...

  • 12.Vue嵌套路由(三层)

    Vue嵌套路由:实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区...

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

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

  • vue-router的高级使用

    第一种使用二级路由的方式 使用默认二级路由的第二种方式: 通过动态路由传参的两种方式: 第一种方式 第二种方式: ...

  • vue二级路由的设置

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

  • Vue的两种路由模式

    在vue-router路由对象中,路由有两种模式:hash和history,而默认的是hash模式. hash路由...

  • 多级路由

    目录结构: 使用 一级路由 二级路由 main.js index.js(路由文件) App.vue Banner....

  • 路由模块

    路由模块控制vue内容显示,路由跳转,组件间的跳转。就是一个页面中实现不同组件内容的切换 1. 安装路由模块 ...

网友评论

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

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