1. 程式人生 > >Vue.Router、query、params、$router、$route

Vue.Router、query、params、$router、$route

1、query方式傳參和接收引數

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

接收引數:
this.$route.query.id

2、params方式傳參和接收引數

傳參:
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })

接收引數:
this.$route.params.id

注意與區別;

params傳參,push裡面只能是 name:'xxxx',不能是path:'/xxx',因為params只能用name來引入路由,如果這裡寫成了path,接收引數頁面會是undefined!!!

另外,二者還有點區別,直白的來說query相當於get請求,頁面跳轉的時候,可以在位址列看到請求引數,而params相當於post請求,引數不會再位址列中顯示

注意:傳參是this.$router,接收引數是this.$route,這裡千萬要看清了!!!

3、this.$router和this.$route 的區別:

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

  • 2.$route為當前router跳轉物件,裡面可以獲取name、path、query、params等

&