VUE—Router的常用知識點（簡單介紹）

一、動態路由

在routers（定義路由） 中path：'/user/:id',其中的id就是動態路由的標誌。

上面表達所有的/user/****路由都會對映到相同的路徑上，也就是說會訪問到同一個頁面。

二、巢狀路由

簡單的理解就是父子路由，一個普通的路由中寫

children:[
{
path:'',
component:
}
]

三、路由跳轉方式

程式設計式路由

router.push()

單擊

<router-link :to="..."> 

等同於 router.push(...)

router.replace() : 重新整理當前路由，與router.push很像，唯一不同就是，它不會向history新增新記錄，而是自動替換掉當前的history記錄。 等同於

<router-link :to="" replace>

router.go(n): 方法的的引數是一個整數，意思是在history記錄中前進或者後退多少，類似於window.history.go(n)

router.go(1) : 前進一步

router.go(-1): 後退一步

路由跳轉的時候可以傳遞引數，兩種傳參方式

程式設計式路由的傳參方式

命名路由 (params)

router-push({ name:'名稱', params:{引數名:引數值}})

宣告式路由導航：

<router-link :to="{name:'',params:{引數名：引數值}}"></router-link>
 

查詢引數(query)

router-push({path:’值‘, query:{引數名：引數值} })

這裡需要注意的是params中只能使用name，不能使用path，而query中，都可以使用。

想要在另一個介面獲取引數，可以使用: $route.params.引數名 來進行獲取，引數查詢的方式也是一樣的。

宣告式路由寫法如上