教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

Web前端培訓(xùn)：嵌套路由怎么定義?

更新時(shí)間:2022年11月02日16時(shí)42分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

　　web前端中，是否是嵌套路由主要是由頁(yè)面結(jié)構(gòu)來(lái)決定的，實(shí)際項(xiàng)目中的應(yīng)用界面，通常是由多層嵌套的組件組合而成。簡(jiǎn)而言之，嵌套路由就是在路由里面嵌套它的子路由。

　　嵌套子路由的關(guān)鍵屬性是children，children也是一組路由，相當(dāng)于前面講到的routes，children可以像routes一樣地去配置路由數(shù)組。每一個(gè)子路由里面可以嵌套多個(gè)組件。子組件又有路由導(dǎo)航和路由容器，示例代碼如下：

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

　　當(dāng)使用children屬性實(shí)現(xiàn)子路由時(shí)，子路由的path屬性前不要帶“/”，否則會(huì)永遠(yuǎn)以根路徑開(kāi)始請(qǐng)求，這樣不方便用戶去理解URL地址。

　　下面我們通過(guò)代碼演示一個(gè)簡(jiǎn)單的嵌套路由的配置，具體代碼如下：

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

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

0 分享到：
和我們?cè)诰€交談！