vue-router傳遞參數的幾種方式

一、編程式的導航 router.push

　　編程式導航傳遞參數有兩種類型：字符串、對象

　　1.字符串：字符串的方式是直接將路由地址以字符串的方式來跳轉，這種方式很簡單但是不能傳遞參數：

this.$router.push("home");

　　2.對象：想要傳遞參數主要就是以對象的方式來寫，分為兩種方式：命名路由、查詢參數，

　 （1）.命名路由：命名路由的前提就是在注冊路由的地方需要給路由命名如：

a.提前在注冊路由的地方給路由命名：

　　　　

b. 在路由跳轉界面，通過params字段傳遞參數　

this.$router.push({ name: 'news', params: { userId: 123 }})

c. 在接受參數界面

this.$route.params.userId

（2）.查詢參數：查詢參數其實就是在路由地址后面帶上參數和傳統的url參數一致的，傳遞參數使用query而且必須配合path來傳遞參數而不能用name，目標頁面接收傳遞的參數使用query。

a. 在路由跳轉界面，通過query字段傳遞參數　

this.$router.push({ path: '/news', query: { userId: 123 }});

b.在接受參數界面

this.$route.query.userId

命名路由和查詢參數傳參的區別：

命名路由搭配params，刷新頁面參數會丟失，

查詢參數搭配query，刷新頁面數據不會丟失.

二、聲明式的導航 <router-link>

1.字符串：

<router-link to="news">click to news page</router-link>

2.對象:

(1).命名路由：

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

(2).查詢參數：

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

最后總結：路由傳遞參數和傳統傳遞參數是一樣的，命名路由類似表單提交而查詢就是url傳遞