通过Vue传递参数可以分为两种方式: params参数
query参数
,params参数的具体过程如下所示:
- 基础
<template> <div @click="onClick">点击跳转</div> </template>
- 数据
data(){ return{ id:12 } }
- 方法
methods: { onClick(){ this.$router.push({ name: 'bindData', params:{ id:this.id } }) } }
- 接收参数
mounted(){ this.data=this.$route.params; }
- 显示数据
<a href="javascript:;">{{data.id}}</a> //data是定义的变量
- 路由配置
{ path: '/bindData', name: 'bindData', component: BindData },
- 效果图
以上效果在刷新页面时数据会消失,要想页面刷新后不影响数据,有2中解决方案:本地存储数据
和路由配置
,后者的实现如下所示:
- 路由配置
{ path: '/bindData/:id', name: 'bindData', component: BindData },
- 效果图
这样id会显示在地址栏中,页面刷新时数据还存在✌️✌️✌️✌️✌️✌️