https://blog.csdn.net/zhouzuoluo/article/details/81259298（copy）
js**
this.$router.push({ name: 'Flow', params: { id:data }})//跳轉傳參數
//接參
console.log(this.$route.params)
頁面**
在父路由組件上使用router-link進行路由導航，傳參用<router-link to="/one/login/001">的形式向子路由組件傳遞參數。使用router-view進行子路由頁面內容渲染，父路由組件childOne.vue 如下：
<template>
<div style="border:1px solid red;color:red;">
<p>這是父路由childOne對應的組件頁面</p>
<p>下面可以點擊顯示嵌套的子路由 </p>
<router-link to="/one/log/123">顯示登錄頁面</router-link>
<router-link to="/one/reg/002">顯示注冊頁面</router-link>
<router-view></router-view>
</div>
</template>
子路由通過 this.$route.params.num 的形式來獲取父路由向子路由傳遞過來的參數，子路由組件login.vue如下：
<template>
<div style="border:1px solid orange;color:orange;">
<p>登錄界面：這是另一個嵌套路由的內容</p>
<h3>{{this.$route.params.num}}</h3>
</div>
</template>
注意：如上所述路由定義的path: "/one/login/:num"路徑和to="/one/login/001"必須書寫正確，否則不斷點擊切換路由，會因為不斷將傳遞的值顯示添加到url中導致路由出錯，如下
傳遞的值存在url中存在安全風險，為防止用戶修改，另一種方式不在url中顯示傳遞的值
params傳參（url中不顯示參數）
定義路由時添加name屬性給映射的路徑取一個別名，router>index.js文件修改router如下：
在父路由組件上使用router-link進行路由導航，使用 <router-link :to="{name:'home',params:{id:001}}> 形式傳遞參數。注意 ': to= ' 前面的冒號，childOne.vue組件修改如下：
<template>
<div style="border:1px solid red;color:red;">
<p>這是父路由childOne對應的組件頁面</p>
<p>下面可以點擊顯示嵌套的子路由 </p>
<router-link :to="{name:'Log',params:{num:666}}">顯示登錄頁面</router-link>
<router-link :to="{name:'Reg',params:{num:888}}">顯示注冊頁面</router-link>
<router-view></router-view>
</div>
</template>
子路由組件頁面獲取父路由傳參方式不變，reg.vue 文件如下：
<template>
<div style="border:1px solid orange;color:orange;">
<p>登錄界面：這是另一個嵌套路由的內容</p>
<h3>子路由獲取的參數：{{this.$route.params.num}}</h3>
</div>
</template>
注意：上述這種利用params不顯示url傳參的方式會導致在刷新頁面的時候，傳遞的值會丟失；
使用Query實現路由傳參
定義路由 router>index.js文件如下：
修改路由導航 <router-link :to="{path:'/one/log',query:{num:123}}"> ，childOne.vue 文件修改如下：
<template>
<div style="border:1px solid red;color:red;">
<p>這是父路由childOne對應的組件頁面</p>
<p>下面可以點擊顯示嵌套的子路由 </p>
<router-link :to="{path:'/one/log',query:{num:123}}">顯示登錄頁面</router-link>
<router-link :to="{path:'/one/reg',query:{num:999}}">顯示注冊頁面</router-link>
<router-view></router-view>
</div>
</template>
子路由組件通過 this.$route.query.num 來顯示傳遞過來的參數，reg.vue 文件如下：
<template>
<div style="border:1px solid purple;color:purple;">
<p>注冊界面：這是二級路由頁面</p>
<h3>{{this.$route.query.num}}</h3>
</div>
</template>