vue 路由跳转传参
<li v-for="article in articles" @click="getDescribe(article.id)">
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
this.$route.params.id
父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
this.$route.params.id父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应子组件: 这样来获取参数
this.$route.query.id
vue 路由跳转传参的更多相关文章
- vue路由跳转传参的两种方法
路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...
- vue路由跳转传参
this.$router.push({ path: '/message/result_notice', query: { id: id } }) // let type = this.$route.n ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- vue 路由跳转带参 方式query ,params
a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:' ...
- vue路由跳转传参数
1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data } ...
随机推荐
- ZooKeeper配置文件常用配置项一览表(转)
配置参数详解(主要是$ZOOKEEPER_HOME/conf/zoo.cfg文件) 参数名 说明 clientPort 客户端连接server的端口,即对外服务端口,一般设置为2181吧. data ...
- ZooKeeper教程资源收集(简介/原理/示例/解决方案)
菩提树下的杨过: ZooKeeper 笔记(1) 安装部署及hello world ZooKeeper 笔记(2) 监听数据变化 ZooKeeper 笔记(3) 实战应用之[统一配置管理] ZooKe ...
- alexanderanokhin ---DTRACE
https://alexanderanokhin.wordpress.com/2011/11/13/dynamic-tracing-of-oracle-logical-io/
- python getaddrinfo 函数
现在python中用到的关于地址查询的函数几乎都可以用getaddrinfo. 也就是说,如果你要想做一些与地址查询,主机名ip转换的操作,都可以用这个函数,下面看一下这个函数. 首先,我们可以用ge ...
- 学习C#和SQL的书籍
1. <21天学通C#> 周红安等编著 电子工业出版社 2. http://blog.csdn.net/21aspnet/article/details/1682200 3. < ...
- Win10中如何把语言栏缩到系统托盘
Win10中如何把语言栏缩到系统托盘 原来语言栏是在系统托盘中的,右键点击,然后选择“显示语言栏”,就不能缩回去了: 后来在“控制面板\时钟.语言和区域\语言\高级设置”里面,有一个选项: “使用桌面 ...
- c# POST和GET方式通过server地址提交数据
1:POST方式提交: <strong><span style="font-size:14px;">private static string HttpPo ...
- 游戏人生(一),我的lua之旅:那些坑爹的CCBReaderLoad
首先,我们说说这个CCBReaderLoad. 这个脚本是cocos2dx自带的一个lua+cocosbuilder 的工具,详细功能呐,往下看. 先来看下我遇到的一个问题: ----美工给了我一个. ...
- UVALive - 6910 (离线逆序并查集)
题意:给处编号从1~n这n个节点的父节点,得到含有若干棵树的森林:然后再给出k个操作,分两种'C x'是将节点x与其父节点所连接的支剪短:'Q a b'是询问a和b是否在同一棵树中. 题解:一开始拿到 ...
- hdu 4850 字符串构造---欧拉回路构造序列 递归+非递归实现
http://acm.hdu.edu.cn/showproblem.php? pid=4850 题意:构造长度为n的字符序列.使得>=4的子串仅仅出现一次 事实上最长仅仅能构造出来26^4+4- ...