VUE中this.$router與this.$route區別,外加push()用法

this。$router

this。$router相當於一個全域性的路由器物件,包含了很多屬性和物件,其中就有push()方法。

this。$route

this。$route表示當前路由物件,每一個路由都會有一個route物件,是一個區域性的物件,可以獲取對應的name, path, params, query 等屬性。

push()用法

使用this。$router。push()方法導航到不同的URL。這個方法會向history棧新增一個新的記錄,所以,當用戶點選瀏覽器後退按鈕時,可以回到之前的URL。

該方法的引數可以是一個字串路徑,或者一個描述地址的物件。例如:

// 字串router。push(‘home’)// 物件router。push({ path: ‘home’ })// 命名的路由,這個意思就是,給路由起個名字,然後可以用push帶著name引數訪問router。push({ name: ‘user’, params: { userId: ‘123’ }})// 這跟程式碼呼叫 router。push() 是一回事User// 帶查詢引數,變成 /register?plan=privaterouter。push({ path: ‘register’, query: { plan: ‘private’ }})

注意:如果提供了 path,params 會被忽略,上述例子中的 query 並不屬於這種情況。取而代之的是下面例子的做法,你需要提供路由的 name 或手寫完整的帶有引數的 path:

const userId = ‘123’router。push({ name: ‘user’, params: { userId }}) // -> /user/123router。push({ path: `/user/${userId}` }) // -> /user/123// 這裡的 params 不生效router。push({ path: ‘/user’, params: { userId }}) // -> /user