1. 程式人生 > >this.$route和this.$router的區別

this.$route和this.$router的區別

控制 路徑 link outer 不同 返回上一頁 tro 目的 獲取參數

1. this.$router:   (個人觀點:可以用來傳遞參數)

表示全局路由器對象,項目中通過router路由參數註入路由之後,在任何一個頁面都可以通過此方法獲取到路由器對象,並調用其push(), go()等方法;

this.$router.push({ path: ‘/monitor‘, query:{ id:id, } })

2. this.$route:    (個人觀點:可以用來獲取參數)

表示當前正在用於跳轉的路由器對象,可以調用其name、path、query、params等方法;

this.$route.query.id

註:使用的時候註意拼寫,兩個很像,就差一個字母,經常會因為寫錯而導致調用的方法無效,而且瀏覽器的控制臺中還不會報錯。。。
-----------------------------------------------------------------------------------------------------------------

做項目的時候發現傳參數是通過 this.$route.query或者 this.$route.params接收router-link傳的參數。

在路由跳轉的時候除了用router-link標簽以外需要在script標簽在事件裏面跳轉,所以有個方法就是在script標簽裏面寫this.$router.push(‘要跳轉的路徑名‘),還有this.$router.go(-1)返回上一頁面

在寫的時候發現這兩個為什麽不同,在控制臺打出this的時候,發現$route和$router同時存在

技術分享圖片

$route為當前router跳轉對象裏面可以獲取name、path、query、params等

$router為VueRouter實例,想要導航到不同URL,則使用$router.push方法

返回上一個history也是使用$router.go方法

this.$route和this.$router的區別