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 相关文章推荐
jquery div 居中技巧应用介绍
Nov 24 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
JSON格式化输出
Nov 10 Javascript
jquery选择器简述
Aug 31 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
javascript中的this详解
2014/12/08 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
python爬虫的工作原理
2017/03/05 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
移动通信专业自荐信范文
2013/11/12 职场文书
市场部专员岗位职责
2013/11/30 职场文书
会计辞职信范文
2014/01/15 职场文书
一年级班主任感言
2014/03/08 职场文书
四年级学生评语大全
2014/04/21 职场文书
小区推广策划方案
2014/06/06 职场文书
个人授权委托书样本
2014/09/13 职场文书
校运动会广播稿300字
2014/10/07 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript