知识点: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. HDU_5527_Too Rich

    Too Rich Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  2. [转]通过apk签名使应用程序有系统权限

    [转]通过apk签名使应用程序有系统权限 (2013-01-08 13:40:50) 转载▼ 标签: it 分类: Android 出处:http://blog.csdn.net/doom66151/ ...

  3. content: "\e600"

    w图标生成原理. <style> @font-face { font-family: iconfont-sm; src: url(//at.alicdn.com/t/font_143340 ...

  4. Spark Streaming源码分析 – DStream

    A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous sequence o ...

  5. 设计模式之Singleton模式

    当程序运行时,有时会希望在程序中,只能存在一个实例,为了达到目的,所以设计了Singleton模式,即单例模式. 单例模式的特征: 想确保任何情况下只存在一个实例 想在程序上表现出只存在一个实例 示例 ...

  6. nginx.conf常用配置解析

    一.全局配置 user username groupname 运行用户及用户组 worker_processes auto 启动进程,通常设置成和cpu数量相等的一个数值,默认为1.可以设置为auto ...

  7. 借助 Django 的 smart_str 和 smart_unicode 进行编码转换(转)

    原文:http://www.dirk.sh/diary/using-django-smart_str-smart_unicode/ Django 为字符编码的转换提供了非常简洁的方法: 1.djang ...

  8. python pip命令技巧

    确保本地开发环境,和线上一致性 1.导出当前解释器的模块pip3 freeze > requirements.txt 2.将这个文件requirements.txt,上传至服务器,在新的虚拟环境 ...

  9. mac下python环境pip报错[SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:590) 的解决方法

    1.mac下python环境pip报错: issuserdeMacBook-Pro:~ issuser$ pip install pyinstallerCollecting pyinstaller  ...

  10. 从两道题看go channel的用法

    在知乎看到有人分享了几道笔试题,自己总结了一下其中与channel有关的题目.全部题目在这里: https://zhuanlan.zhihu.com/p/35058068 题目 5.请找出下面代码的问 ...