vue.js中路由传递参数
知识点: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中路由传递参数的更多相关文章
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- JS中URL编码参数(UrlEncode)
JS中URL编码参数(UrlEncode) 网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现,其实JS中本身就有那样的参数.参数parameter由于用类似URL的 ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 【2017-06-27】Js中获取地址栏参数、Js中字符串截取
一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
随机推荐
- python - 2 8 16进制/颜色/字符编码
1.二进制 八进制 十六进制 二进制: bin() 0b10010八进制: oct() 0o10十进制: 1-100十六进制: hex() 0X53 BH 十进制转2, 8,16进制: >> ...
- 素数筛法—时间复杂度O(n)
请你想出一个算法求出n以内(含n)的所有素数,要求算法的时间复杂度越小越好. 这里介绍一种算法——快速线性素数筛法(欧拉筛法),时间复杂度O(n). 诀窍在于:筛除合数时,保证每个合数只会被它的最小质 ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- openresty环境搭建问题记录
第一次在mac安装遇到如下问题: 截图: 具体code如下: Sonofelice:bch-flowrouter baidu$ brew install openresty/brew/openrest ...
- 怎样在QML应用中创建一个Context Menu
我们在非常多的系统中看见能够在屏幕的一个地方长按,然后就能够依据当前显示的上下文弹出一个菜单. 菜单中能够有一些选项,比方删除,改动该项.这样的一般在ListView或GridView中常见.今天,我 ...
- mysql参照完整性 策略设置之 on update 和 on delete
一.当表中有外键约束的时候参照表中数据的删除和修改违背参照完整性时 可根据以下策略进行处理 1.两条策略设置为cascade的时候 参照表中的数据修改或者删除的时候改表中数据也会被删除 2.两条策略设 ...
- python web框架 django 练习1 django 1.11版本
django练习 在我自己项目里创建一个xiaoliu的文件夹 里面创建s1.py 文件 s1.py文件 里面写各种函数 from django.shortcuts import HttpRespon ...
- 【足迹C++primer】38、关联容器操作(2)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/cutter_point/article/details/35244805 关联容器操作(2) map ...
- linux中执行定时任务对oracle备份(crontab命令)
执行定时任务对oracle表数据备份: 1.创建sh脚本 [oracle@localhost ~]$ vi bak.sh 2.添加脚本内容 #!/bin/bash #:本脚本自动备份7天的数据库,每次 ...
- Hadoop2.7.3+spark2.1.0+hbase0.98分布式集群部署
运行环境配置(10.79.115.111-114) 1.关闭防火墙与selinux 关闭防火墙: CentOS 7.x默认使用的是firewall作为防火墙. systemctl stop firew ...