前端路由（三） 巢狀路由 注意路由跳轉和元件巢狀

// 父級路由

>
>
>
基本路由div
>
>
>
'/home'
>
主頁link
>
li>
ul>
path
='/home'
component
=/>
div>
browserrouter
>
// 子路由配置

home()

/>

<

/div>);

}例項第一步：安裝依賴包

npm install react-router-dom -d

import react from

'react'
;import baserouter from
'./component/router/02.js'
function()
export

/*

巢狀路由用法
*/import react from
'react'
// 匯入路由相關元件
// 所有的路由配置必須包裹在 browserrouter 裡面
import
from
'react-router-dom'
function
zhagnsan()
function
lisi()
function
home()
'/home/zhangsan'
>主頁-張三<
/link>
'/home/lisi'
>主頁-李四<
/link>
>
'/home/zhangsan' component=
/>
'/home/lisi' component=
/>
<
/div>)}
function
tech()
function
edu(
)class
baserouter
extends
react.component
'/home'
>主頁<
/link>
'/tech'
>科技<
/link>
'/edu'
>教育<
/link>
'/home' component=
/>
'/tech' component=
/>
'/edu' component=
/>
<
/div>
<
/browserrouter>)}
}export
default baserouter

之三 巢狀路由

巢狀路由，即路由中巢狀路由。下面的例子，舉例商品列表頁面中，通過乙個路由檢視商品的標題，再通過乙個路由檢視商品的。我們先定義兩個元件，title.vue image.vue。下面是title.vue 商品名稱 image.vue 就不列出了。然後，我們修改router index.js 給商品列表路...

Vue路由機制 巢狀路由

doctype html html head meta charset utf 8 title vue路由機制 巢狀路由 title head body div id router link to user user router link router link to reg reg router...

vue 路由 4 巢狀路由》

點選about後，新聞和體育屬於about的子路由呼叫的頁面 路由裡使用children屬性可以實現路由的巢狀 注 主要是標紅的幾個檔案 重新編寫這幾個檔案中的 index.js 引入路由 import from vue router import home from views home.vue ...