知识点: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. Exchange OAB(Offline Address Book)

    If Outlook is left running constantly in Cached Exchange Mode, it updates the Offline Address Book a ...

  2. IOUtils方式上传下载文件

    package com.css.hdfs04; import java.io.File; import java.io.FileInputStream; import java.io.FileOutp ...

  3. linux服务器自动切割日志

    需求 由于nginx的日志会不停地增大,所以需要我们自己去切割日志,方便管理,需要达到以下的效果: 按日期自动切割日志,最小单位是天. 当日志总量超过一定量时,自动直接清理日志,限定总量不能超过100 ...

  4. Python面试应急5分钟!

    ​ 不论你是初入江湖,还是江湖老手,只要你想给自己一个定位那就少不了面试!面试的重要性相信大家都知道把,这就是我们常说的“第一印象”,给大家说一下我的面试心得把,面试前的紧张是要的,因为这能让你充分准 ...

  5. 如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现

    一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...

  6. karma安装

    Last login: Sat Jun :: on ttys000 ➜ ~ cd /Users/wangyizhe/Projects/work/smartcmp/services/new-yacmp/ ...

  7. 七、Mosquito 集群搭建

    本章主要讲述Mosquitto 集群搭建的两种方式 1.进行双服务器搭建 2.进行多服务器搭建 一.Mosquitto的分布式集群部署 如果需要做并发量很大的时候就需要考虑做集群处理,但是我在查找资料 ...

  8. ED3 flash 、OBP flash

    海力士.东芝等ED3 NAND Flash ED3的TLC编程规则相对于OBP来讲会简单许多,因为ED3的编程规则非常有规律,很容易掌握,ED3的每个WL页数量是固定的. ED3在对行地址的定义上与O ...

  9. CentOS6.8 yum 安装 mysql5.7.12 完美步骤

    一,wget http://dev.mysql.com/get/mysql57-community-release-el6-8.noarch.rpm 二,yum localinstall mysql5 ...

  10. Laravel 文档中的 Service Providers

    $this->app->singleton('ReportServices', function () { return new \App\Services\ReportServices( ...