Vue中關於路由傳參query和params的區別

路由配置：{path:'/login',name:'Login',component:Login},

1.頁面攜帶query參數跳轉(path,name指定跳轉到Login時都可以攜帶query參數)

this.$router.push({ path:'/login',name:'Login', query: { id: this.id } )

query相當與發送了一次get請求，請求參數會顯示在瀏覽器地址欄中

2.頁面攜帶params參數跳轉(攜帶params參數跳轉時只能使用name指定)

this.$router.push({ name:'Login', params: { id: this.id } )

params相當與發送了一次post請求，請求參數則不會顯示，並且刷新頁面之后參數會消失

當路由配置更改為

路由配置：{path:'/login/:id',name:'Login',component:Login}

並且再次發送請求，請求數據不會隨着頁面的刷新而消失

 

獲取請求參數

this.$route.params.id
this.$route.query.id

 

注:

router是VueRouter的一個對象，通過Vue.use(VueRouter)和VueRouter構造函數得到一個router的實例對象，這個對象中是一個全局的對象，他包含了所有的路由包含了許多關鍵的對象和屬性。

$router.push({path:'login'});本質是向history棧中添加一個路由，在我們看來是 切換路由，但本質是在添加一個history記錄;

而route是一個跳轉的路由對象，每一個路由都會有一個route對象，是一個局部的對象，可以獲取對應的name,path,params,query等