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


Posted in Javascript onApril 12, 2018

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的实现代码

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

补充:

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系统错误:-1072896658的解决办法
Jul 08 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
JS中promise化微信小程序api
Apr 12 #Javascript
vue配置请求本地json数据的方法
Apr 11 #Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
JS实现的合并多个数组去重算法示例
Apr 11 #Javascript
JS实现的JSON数组去重算法示例
Apr 11 #Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 #jQuery
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
隐性调用php程序的方法
2015/06/13 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
php自动加载方式集合
2016/04/04 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
javascript回车完美实现tab切换功能
2014/03/13 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python字符串替换实例分析
2015/05/11 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
python实现学生管理系统开发
2020/07/24 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
出纳岗位职责范本
2013/12/01 职场文书
就业自荐书
2013/12/05 职场文书
教师自荐信范文
2013/12/09 职场文书
同意落户证明
2015/06/19 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS