教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

Web前端培训:嵌套路由怎么定义?

更新时间:2022年11月02日16时42分 来源:传智教育 浏览次数:

好口碑IT培训

  web前端中,是否是嵌套路由主要是由页面结构来决定的,实际项目中的应用界面,通常是由多层嵌套的组件组合而成。简而言之,嵌套路由就是在路由里面嵌套它的子路由。

  嵌套子路由的关键属性是children,children也是一组路由,相当于前面讲到的routes,children可以像routes一样地去配置路由数组。每一个子路由里面可以嵌套多个组件。子组件又有路由导航和路由容器,示例代码如下:

<router-link to="/父路由地址/要去的子路由"></router-link>

  当使用children属性实现子路由时,子路由的path属性前不要带“/”,否则会永远以根路径开始请求,这样不方便用户去理解URL地址。

  下面我们通过代码演示一个简单的嵌套路由的配置,具体代码如下:

var router = new VueRouter({
    router: [
      {
        path: '/home',
        Component: home,
        children: [
          { path: 'login', component: login },
          { path: 'register', component: register }
        ]
       }
    ]
})

  在上述代码中,第3~10行配置的是外层路由,第6~9行配置的是子路由。

0 分享到:
和我们在线交谈!