Vue 页面跳转不用router-link的实现代码

前端之家收集整理的这篇文章主要介绍了Vue 页面跳转不用router-link的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、给父页面跳转的地方设置事件

页面上展示的信息

//要跳转过去的页面用隐藏来代替
<div v-if="addShow" class="add-category ">
<el-col :span="20" :offset="2">
<el-form :model="formData" :rules="rules" ref="formData" label-position="left">

名称" prop="name"> //v-model绑定formData.name(name为需要的字段,formDataw为表格ref绑定的数据) 确定

2、JS部分

显示的页面部分默认为false,隐藏 checkdDistributor: null,},methods: { // 编辑按钮 handleEdit(index,row){ this.checkdDistributor = row; //接受传参 this.addShow = true; // addshow为要显示页面 } } watch: { // 带参数编辑 checkdDistributor(){ for(let attr in this.formData){ this.formData[attr] = ('' + this.checkdDistributor[attr]); //写入参数 } } },

3、最后上效果

补充:

vue router-link跳转传值示例

1、router-link

2、routes路由

3、取值

{{$route.params.freezeMon}}

4、小结:router-link跳转传值要注意的地方

* to前面要加: * to后面{中的name值要与路由中的name值一致 * 下面的这种方式是错误

猜你在找的Vue相关文章