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"> < ...
随机推荐
- PHP 常用资源
Apache:http://httpd.apache.org/download.cgi PHP:http://windows.php.net/download#php-5.6 MySQL:http:/ ...
- window.navigator.userAgent $_SERVER['HTTP_USER_AGENT']
wjs php返回结果一致 <script> !function () { var UA = window.navigator.userAgent, docEl = document.do ...
- 关于VFS文件系统中的superblock、inode、d_entry和file数据结构
- SSH整合中,使用父action重构子类action类.(在父类中获取子类中的泛型对象)
import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import com.opensymphony.x ...
- EIT: where is it now and what lies ahead?
EIT: where is it now and what lies ahead? Electrical impedance tomography (EIT) is an emerging clini ...
- Spring数据访问和事务
1.模型 2.解耦 3.实现 3.1 核心接口 3.2 代码分析 3.2.1 事务管理 3.2.2 数据访问 4.使用 4.1 编程模式 4.2 配置模式 4.2.1 声明式配置方式 4.2.2 注解 ...
- 针对Quant的Python快速入门指南
作者:用Python的交易员 (原创文章,转载请注明出处) 最近有越来越多的朋友在知乎或者QQ上问我如何学习入门Python,就目前需求来看,我需要写这么一篇指南. 针对整个vn.py框架的学习,整体 ...
- python - 用户交互/数据类型/格式化输出/运算符/流程控制单双多分支
python:用户交互: 等用户输入,做反应: username=input("username:")password=input("password:")pr ...
- 安装canal
一.安装前准备 配置Mysql: [mysqld] log-bin=mysql-bin #添加这一行就ok binlog-format=ROW #选择row模式 server_id=1 #配置mysq ...
- 01-开始使用django(全、简)
目录 (一)创建项目 1.生成django默认目录 2.创建应用目录 3.安装应用 4.配置使用mysql数据库 5.运行轻量级web服务器,预览 (二)设计模型 1.在models.py中定义模型类 ...