在vue項目中我們經(jīng)常需要跳轉(zhuǎn)頁面，大多數(shù)情況下跳轉(zhuǎn)頁面，也不僅僅是單一的跳轉(zhuǎn)，而是需要攜帶參數(shù)，在跳轉(zhuǎn)后的頁面去渲染和使用，除了存進全局狀態(tài)管理方法外，還有一種較為簡單便捷的方式能夠?qū)崿F(xiàn)我們在跳轉(zhuǎn)后的頁面拿到跳轉(zhuǎn)前的數(shù)據(jù)，那就是動態(tài)路由。

動態(tài)路由顧名思義是一種路由跳轉(zhuǎn)，加上了動態(tài)的意思就是指它能夠攜帶參數(shù)并跳轉(zhuǎn)。

具體方法如下：

第一種，在路由表中配置需要跳轉(zhuǎn)的路由路徑，并在路徑最后添加斜杠/:params，params是跳轉(zhuǎn)時要攜帶的參數(shù)變量，可以換成其他變量名

在頁面中給觸發(fā)事件或函數(shù)中用router.push()進行跳轉(zhuǎn)，在參數(shù)的路徑中后面直接拼接需要攜帶的參數(shù)，或者變量

在跳轉(zhuǎn)后的頁面中用$route.params進行接收,接收的變量名是路由表中拼接的變量名"params“

第二種，同樣在路由表中寫好路由信息，添加上動態(tài)路由參數(shù)變量，在$router.push()的參數(shù)中傳遞一個對象參數(shù)，對象里寫路由名稱name字段書寫路由名稱和params對象中書寫跳轉(zhuǎn)攜帶的參數(shù)

以上兩種是動態(tài)路由中的params傳參，在瀏覽器地址欄中呈現(xiàn)成“路徑/參數(shù)”的形式

還有一種是原生js中提供的路由跳轉(zhuǎn)傳參方式，querry傳參，與vue中提供的方法有所區(qū)別的是不用再在路由表配置項的路徑中拼接冒號參數(shù)名，直接使用router.push()跳轉(zhuǎn)，在獲取參數(shù)時不再使用$route.params獲取參數(shù)，在querry傳參中使用$route.querry來獲取參數(shù)。除此之外的不同點是瀏覽器地址欄中是以"路徑名?參數(shù)1&參數(shù)2”的查詢字符串形式來呈現(xiàn)的