首頁技術文章正文

什么是嵌套路由

更新時間:2022-02-09 來源:黑馬程序員 瀏覽量:

   是否是嵌套路由主要是由頁面結構來決定的,實際項目中的應用界面,通常由多層嵌套的組件組合而成。簡而言之,嵌套路由就是在路由里面嵌套它的子路由。

  嵌套子路由的關鍵屬性是children,children也是一組路由,相當于前面講到的routes,children可以像routes一樣地去配直路由數組。每一個子路由里面可以嵌套多個組件。子組件又有路由導航和路由容器,示例代碼如下:  

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

  當使用children屬性實現子路由時,子路由的path屬性前不要帶“/“,否則會永遠以根路徑開始請求,這樣不方便用戶去理解URL地址。

  下面我們通過代碼演示一個簡單的嵌套路由的配置,具體代碼如下:

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!