Vue-Router實現(xiàn)頁面路由管理
頁面實現(xiàn)(HTML模板中)在Vue-Router中,定義了和標簽。其中用于定義頁面中的可點擊部分,用于顯示點擊后的內(nèi)容。重要屬性to定義了點擊后要跳轉(zhuǎn)的路徑,例如:Home。JS中配置路由首先要定義r
頁面實現(xiàn)(HTML模板中)
在Vue-Router中,定義了
JS中配置路由
首先要定義routes,即路由的實現(xiàn)。每條路由包含兩部分:path表示路徑,component表示組件。例如{ path: '/home', component: Home }。通過多條路由組成一個routes,最后創(chuàng)建router對路由進行管理,通過構(gòu)造函數(shù)new VueRouter()創(chuàng)建并傳入routes參數(shù)。
啟動路由執(zhí)行過程
當用戶點擊
路由配置與根實例注入
在src目錄下新建組件如和,在中定義
重定向和控制臺查看
通過重定向功能,可以讓頁面加載時直接顯示指定組件??刂婆_可以觀察路由組件切換過程,
動態(tài)路由及參數(shù)獲取
動態(tài)路由使不同用戶導航到同一組件,路徑中有動態(tài)部分需匹配不同ID??赏ㄟ^:params獲取動態(tài)部分,如/user/:id,在組件中利用this.$獲取。同時,定義動態(tài)路由需要對應組件和路由配置,以實現(xiàn)靈活的頁面跳轉(zhuǎn)功能。