react巢狀路由

2022-06-28 20:15:11 字數 1971 閱讀 5884

/*一級路由

*/class first extends component

else})}

); }}/*

二級路由

*/class systemrouter extends component

else

})}); }

}export ;

////

handle "sub"-routes by passing them in a `routes`

//prop to the component it renders.

/*開放路由

*/function

routewithsubroutes(route)

path=

render=

/>);}

/*登入檢測路由

*/function

privateroute()

render=) =>isauthenticated ?(

children

) : (

to=}}

/>

) }

/>

);}

import react from 'react';


import from './router/index';


function


return


( );}


export 


import react, from 'react';


import from '../router/index';


import from "react-router-dom";


import from 'antd';


const =menu;


class system extends component 


handleclick = e =>;


render() 


style=}


defaultselectedkeys=


defaultopenkeys=


mode="inline"


>


key="sub1"title=


>


busbus22


float:'left' }}/>


); }


}export 


default withrouter(system);
最後來倆效果圖，頁面分三部分，頭部、左側導航、右側內容，切換時只有右側內容變化。

vue router 巢狀路由

我們已經學習過了vue模板的另外定義形式，使用。首頁 新聞然後js裡定義路由元件的時候 1.定義 路由 元件。const home const news 實際應用介面，通常由多層巢狀的元件組合而成。比如，我們 首頁 元件中，還巢狀著 登入 和 註冊 元件，那麼url對應就是 home login和 ...

Vue巢狀路由

src components index page index2 router index.js main.js html部分 2級頁面在此顯示 import vue from vue import router from router 引入router.js import vuex from vu...

react router 巢狀路由

import react from react import from react router dom export default function function home console.log match return h2 function about function topics ...