$router 和 $route

1, route 的區別

• router.push方法

• $route爲當前router跳轉對象,路由信息對象,只讀對象,裏面能夠獲取name、path、query、params等

// this.$router.push()
    // this.$router.replace()
    // this.$router.go()
複製代碼

2, this.route.query

1, params方式傳參和接收參數

// 傳參: 
this.$router.push({
    name: 'index'
    params:{
      id:id
    }
  })
  
// 接收參數:
this.$route.params.id
 
// url的表現形式(url中沒有參數)
http://localhost:8080/#/index

// 路由
{
   path: '/index/:id/:name',
   name: 'index',
   component: index // 這個index是傳進來的組件名稱
 }
複製代碼

2, query方式傳參和接收參數

// 傳參
this.$router.push({
    path: '/index'
    query:{
      id:id
    }
 })

//接收參數
this.$route.query.id

// url的表現形式(url中帶有參數)
http://localhost:8080/#/index?id=1
複製代碼

• 1,params傳參,push裏面只能是 name:'xx',不能是path:'xx',由於params只能用name來引入路由,若是這裏寫成了path,接收參數頁面會是undefined

• 直白的來講query至關於get請求,頁面跳轉的時候,能夠在地址欄看到請求參數,而params至關於post請求,參數不會再地址欄中顯

• params是路由的一部分,必需要有 , query是拼接在url後面的參數,沒有也不要緊

• query刷新 不會 丟失query裏面的數據, params刷新 會 丟失 params裏面的數據

• 傳參是this.route