知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数

方法一:使用 <router-link :to="{name:'edithospital',params:{hid:101}}">编辑</router-link>

1.在路由配置中添加

{
      name:'edithospital',             \\路由的名字
      path: '/edithospital/:hid',      \\路由中添加要传递的参数:hid
      component: resolve => require(['../components/page/hospital/EditHospital.vue'], resolve)
}

. A页面

<router-link :to="{name:'edithospital',params:{hid:101}}">编辑</router-link> \\101是变量,可根据实际情况改变

\\name是路由的名字,params是传递的参数

3. B页面 <template><template>中添加

{{$route.params.hid}}     // 101

方法二:<button @click="handleEdit(scope.$index, scope.row)"> 编辑</button>

1.同上

2.A页面

handleEdit(index, row) {
this.$router.push({
name: 'edithospital',
params: {
hid: row.hid //row.hid为变量
}
})
}, 3.同上
--------------------------------------------------------------------------------------------------------------------------------------
效果参考:
可参考:1.https://segmentfault.com/q/1010000009749320
2.http://blog.csdn.net/wy01272454/article/details/77869442?locationNum=7&fps=1

vue.js中路由传递参数的更多相关文章

  1. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  2. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  3. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  4. JS中URL编码参数(UrlEncode)

    JS中URL编码参数(UrlEncode) 网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现,其实JS中本身就有那样的参数.参数parameter由于用类似URL的 ...

  5. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  6. 【2017-06-27】Js中获取地址栏参数、Js中字符串截取

    一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...

  7. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  8. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  9. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

随机推荐

  1. CentOS安装python-2.7+安装pip-10.0.0

    注:以下所有操作均在CentOS 6.8 x86_64位系统下完成. 首先查看当前系统预装的python版本: # whereis python python2: /usr/bin/python2 / ...

  2. Genymotion 模拟器的sd卡的位置

    今天用genymotion测试一个例子,发现要用sdcard,虽然可以再DDMS的 File Explore 下看到 sdcard目录,也可以看到/mnt/sdcard 目录,但是往他那里传文件,建目 ...

  3. Keywords Search---hdu2222(AC自动机 模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2222 一个常见的例子就是给出n个单词,再给出一段包含m个字符的文章,让你找出有多少个单词在文章里出现过 ...

  4. python中lambda使用

    一.lambda函数 1.lambda函数基础: lambda函数也叫匿名函数,即,函数没有具体的名称,而用def创建的方法是有名称的.如下: """命名的foo函数&q ...

  5. Android设置透明状态栏和透明导航栏

    Android透明状态栏只有在4.4之后有. 在代码中加入下面几行代码即可实现

  6. Keras学习-1

    本文基于http://keras-cn.readthedocs.io/en/latest/for_beginners/concepts/提及的知识总结,感谢作者做出的贡献,如有侵权将立即删除 符号计算 ...

  7. js-jquery-003-条形码-二维码【QR码】

    一.基本使用 插件地址:https://github.com/jeromeetienne/jquery-qrcode 1.首先在页面中加入jquery库文件和qrcode插件. <script ...

  8. Node.js REST 工具 Restify

    Restify 是一个 Node.JS 模块,可以让你创建正确的 REST web services.它借鉴了很多 express 的设计,因为它是 node.js web 应用事实上的标准 API. ...

  9. java中的静态分派和动态分派

    多态是java的基本特征之一,多态即一个对象具有多种形态(多种表达形式,猴子是动物的一种的表现形式),例如:子类是父类的一种形态. 当方法重载时,就会涉及到多态. 1:在重载时是通过参数的静态类型,而 ...

  10. python学习笔记(二十四)继承与封装

    继承(extends)就是把多个类中相同的成员给提取出来定义到一个独立的类中,然后让这多个类和该独立的类产生一个关系,这多个类就具备了这些类容,这个关系就叫做继承. 实现继承的类称为子类,也叫派生类, ...