當前位置:成語大全網 - 書法字典 - Vue動態路由

Vue動態路由

我們經常需要將某個模式匹配的所有路由映射到同壹個組件。例如,我們有壹個用戶組件,用於呈現不同id的所有用戶。那麽,我們可以在vue-router的路由路徑中使用“動態分段”來達到這種效果:

現在,像/user/foo和/user/bar都將映射到相同的路由。

“路徑參數”使用冒號:標簽。當路徑匹配時,參數值將設置為。$route.params,可以在每個組件中使用。因此,我們可以更新用戶的模板並輸出當前用戶的ID:

妳可以看看這個網上的例子。

您可以在壹個路線中設置多個“路徑參數”,相應的值將被設置為route.params。例如:

除了$route.params,$route對象還提供了其他有用的信息,比如$route.query(如果URL中有查詢參數),$route.hash等等。您可以查看API文檔了解詳細信息。

提醒壹下,當使用路由參數時,比如從/user/foo導航到/user/bar,原始的組件實例將被重用。因為兩種方法都呈現相同的組件,所以重用比銷毀和重新創建更有效。但是,這也意味著組件的生命周期鉤子不會被再次調用。

當重用組件時,如果您想響應路由參數的變化,您可以簡單地觀察$route對象:

或者使用2.2中引入的beforeRouteUpdate來導航防護:

常規參數將只匹配由/分隔的URL片段中的字符。如果我們想要匹配任何路徑,我們可以使用通配符(*):

使用通配符路由時,請確保路由順序正確,也就是說,使用通配符的路由應該放在最後。路由{path: '* ' '通常用於客戶端404錯誤。如果您使用歷史模式,請確保您的服務器配置正確。

使用通配符時,名為pathMatch的參數會自動添加到$route.params中。它包含URL與通配符匹配的部分:

Vue-router使用path-to-regexp作為路徑匹配引擎,因此它支持許多高級匹配模式,例如可選的動態路徑參數、零個或多個匹配、壹個或多個匹配,甚至自定義常規匹配。查看它的文檔以了解高級路徑匹配,這個例子顯示了vue-router如何使用這種匹配。

有時候,同壹條路徑可以匹配多條路由,在這種情況下,匹配的優先級是按照路由定義的順序:誰先定義誰的優先級最高。