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 } ...
随机推荐
- POJ 3278 Catch That Cow(求助大佬)
Catch That Cow Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 109702 Accepted: 34255 ...
- springmvc 解析xml数据
springmvc 解析xml数据 http://blog.csdn.net/zhi_jun/article/details/37925475
- java 基础编程day1
public class TextCharType{ public static void(Sting[] args){ char c1 = 'a'; char c2 = '了'; System.ou ...
- Thrift源代码分析(八)--总结加一个完整的可执行的Thrift样例
前面七篇文章分析了Thrfit的方方面面,看到这里时应该对Thrift有了深入的理解. Thrift源代码分析(一)-- 基本概念 Thrift源代码分析(二)-- 协议和编解码 Thrift源代码分 ...
- cocos2d-x 3.2 之 2048 —— 第二篇
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- luogu2765 魔术球问题 网络流
题目大意: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球.(1)每次只能在某根柱子的最上面放球.(2)在同一根柱子中,任何2个相邻球的编号之和为完全平方数.试设计一 ...
- Vim 复制粘贴探秘
Vim作为最好用的文本编辑器之一,使用vim来编文档,写代码实在是很惬意的事情.每当学会了vim的一个新功能,就会很大地提高工作效率.有人使用vim几十年,还没有完全掌握vim的功能,这也说明了vim ...
- 虚拟机中的ip和本机的ip不是一个网段的
将虚拟机的网络适配器 模式改为桥接模式 然后就会和主机处于同一个网段了
- 【POJ 3322】 Bloxorz I
[题目链接] http://poj.org/problem?id=3322 [算法] 广度优先搜索 [代码] #include <algorithm> #include <bitse ...
- MySQL 的单表查询
单表查询 语法: 一.单表查询的语法 SELECT 字段1,字段2 ,...FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY filed LIMIT ...