Vue 页面跳转不用router-link的实现代码
时间:2019-04-14
本文章向大家介绍Vue 页面跳转不用router-link的实现代码,主要包括Vue 页面跳转不用router-link的实现代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、给父页面跳转的地方设置事件
//原来的页面上展示的信息 <div v-if="!addShow" class="function"> <el-row> <template slot-scope="scope"> <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> //带参数进行编辑 <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button> </template> </el-row> </div> //要跳转过去的页面用隐藏来代替 <div v-if="addShow" class="add-category "> <el-col :span="20" :offset="2"> <el-form :model="formData" :rules="rules" ref="formData" label-position="left"> <el-row> <el-col :span="10"> <el-form-item label="销售区域名称" prop="name"> <el-input v-model="formData.name"></el-input> //v-model绑定formData.name(name为需要的字段,formDataw为表格ref绑定的数据) </el-form-item> </el-col> </el-row> <el-col :span="18"> <el-form-item label="销售区域描述"> <el-input type="textarea" :rows="5" v-model="formData.description"></el-input> </el-form-item> </el-col> <el-col :span="2" :offset="9"> <el-button type="success" @click="handleSubmit('formData')" >确定</el-button> </el-col> <el-col :span="2" :offset="1"> <el-button @click="onCancel">取消</el-button> </el-col> </el-form> </el-col> </div>
2、JS部分
data() { addShow: false //设置要显示的页面部分默认为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
<router-link :to="{name:'deitail',params:{freezeMon:'2017-10',owerName:'西安'}}" tag="div" > </router-link>
2、routes路由
export default new Router({ routes: [ { path: '/', name: 'Index', component: Index }, { path: '/deitail', name: 'deitail', component: deitail } ] })
3、取值
<h1>{{$route.params.freezeMon}}</h1>
4、小结:router-link跳转传值要注意的地方
* to前面要加:
* to后面{中的name值要与路由中的name值一致
* 下面的这种方式是错误的
<router-link to="{path:'/deitail',params:{freezeMon:'2017-10',owerName:'西安'}}" tag="div" > </router-link>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浅谈Apache Shiro权限模块及数据库设计
- 企图变秃变强的第一天
- 企图变秃变强的第二天
- Lambda表达式和FastDfs文件上传
- Postman带token测试接口、找不到生产者、无法连接MySQL、禅道部署
- MyBatis-Plus调试配置,IllegaStateException,StringUtils补充
- NullException、Token的作用、Mapstruct用法
- 1.String类型字符串拼接2.IDEA清除缓存、热部署3.File的用法 4.Dubbo查询服务状态
- 1.Dubbo 常见错误及解决方法
- SpringBoot学习一:创建工程、pom文件
- SpringBoot学习二:基础配置
- Spring Boot 学习三:静态资源、整合 Thymeleaf 页面模板、@RestControllerAdvice
- SpringBoot学习四:日志框架、SpringBoot自动化配置
- SpringBoot学习五:错误处理、跨域支持
- Spring Security安全