vue页面传参和接参

 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>