頁(yè)面實(shí)現(xiàn)（HTML模板中）在Vue-Router中，定義了和標(biāo)簽。其中用于定義頁(yè)面中的可點(diǎn)擊部分，用于顯示點(diǎn)擊后的內(nèi)容。重要屬性to定義了點(diǎn)擊后要跳轉(zhuǎn)的路徑，例如：Home。JS中配置路由首先要定義r

頁(yè)面實(shí)現(xiàn)（HTML模板中）

在Vue-Router中，定義了和標(biāo)簽。其中用于定義頁(yè)面中的可點(diǎn)擊部分，用于顯示點(diǎn)擊后的內(nèi)容。重要屬性to定義了點(diǎn)擊后要跳轉(zhuǎn)的路徑，例如：Home。

JS中配置路由

首先要定義routes，即路由的實(shí)現(xiàn)。每條路由包含兩部分：path表示路徑，component表示組件。例如{ path: '/home', component: Home }。通過多條路由組成一個(gè)routes，最后創(chuàng)建router對(duì)路由進(jìn)行管理，通過構(gòu)造函數(shù)new VueRouter()創(chuàng)建并傳入routes參數(shù)。

啟動(dòng)路由執(zhí)行過程

當(dāng)用戶點(diǎn)擊標(biāo)簽時(shí)，根據(jù)to屬性匹配配置的路徑，找到對(duì)應(yīng)的組件，并將其渲染到標(biāo)簽中。這整個(gè)過程基于hash實(shí)現(xiàn)。為體驗(yàn)Vue-Router，可以通過Vue-CLI創(chuàng)建項(xiàng)目，在src目錄下建立組件、定義路由等步驟。

路由配置與根實(shí)例注入

在src目錄下新建組件如和，在中定義和，再在router.js中定義路由映射關(guān)系。將路由注入根實(shí)例中啟動(dòng)路由。另一種方法是在main.js中引入路由并注入到根實(shí)例中。

重定向和控制臺(tái)查看

通過重定向功能，可以讓頁(yè)面加載時(shí)直接顯示指定組件。控制臺(tái)可以觀察路由組件切換過程，會(huì)渲染成標(biāo)簽，to屬性變?yōu)閔ref屬性，會(huì)渲染定義的組件。

動(dòng)態(tài)路由及參數(shù)獲取

動(dòng)態(tài)路由使不同用戶導(dǎo)航到同一組件，路徑中有動(dòng)態(tài)部分需匹配不同ID?？赏ㄟ^:params獲取動(dòng)態(tài)部分，如/user/:id，在組件中利用this.$獲取。同時(shí)，定義動(dòng)態(tài)路由需要對(duì)應(yīng)組件和路由配置，以實(shí)現(xiàn)靈活的頁(yè)面跳轉(zhuǎn)功能。