知识点: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. sersync+rsync原理及部署

    标签:sersync+rsync部署文档 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liubao0312.blog.51ct ...

  2. C#、devExpress 的 给bandedGrid加菜单功能 :复制、粘贴的例子(转)

    C#.devExpress 的 给bandedGrid加菜单功能 :复制.粘贴的例子 CopyFromGrid PasteToGrid PasteNewRowsToGrid private void ...

  3. ubuntu14下创建软件的快捷启动方式

    下载软件,使用softname/bin/softname.sh即可启动,但是很麻烦,每次都要打开terminal 为了方便,我们需要创建desktop文件指向这个启动软件的shell文件(以创建Pyc ...

  4. spring 拾遗

    1.@PostConstruct VS  init-method 1.1 both BeanPostProcessor 1.2 @PostConstruct is a JSR-250 annotati ...

  5. python中的抽象方法

    python中的抽象方法 父类要限制1.子类必须有父类的方法2.子类实现的方法必须跟父类的方法的名字一样 import abc class A(metaclass=abc.ABCMeta): @abc ...

  6. notepad插件:url变成可以点击的连接

  7. 008-Hadoop Hive sql语法详解3-DML 操作:元数据存储

    一.概述 hive不支持用insert语句一条一条的进行插入操作,也不支持update操作.数据是以load的方式加载到建立好的表中.数据一旦导入就不可以修改. DML包括:INSERT插入.UPDA ...

  8. linux memery dump

    一.free 1.安装绘图工具sudo apt-get install python-matplotlib 2.开启dump采集系统监控数据./dump.sh & 3.数据导入图形界面pyth ...

  9. 《闪存问题之PROGRAM DISTURB》总结

    来自 http://www.ssdfans.com/?p=1814 SSD之所以需要BCH或LDPC等ECC纠错算法,是因为闪存中的数据会在神不知鬼不觉的情况下发生比特翻转. 导致比特翻转的原因很多, ...

  10. Excel文本型数据转为数值型的方法

    操作步骤非常简单,适用于所有版本的Excel. 在任意一个空白单元格中输入数值1,然后选中该单元格,执行复制操作: 选中需要转换的单元格(或区域),执行“编辑.选择性粘贴”命令,打开“选择性粘贴”对话 ...