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 } ...
随机推荐
- spring mvc之applicationContext
1.ApplicationContext是在package org.springframework.context下,是spring的,spring context包下的. applicationCo ...
- myeclipse git 上下箭头表示什么
myeclipse git 上下箭头表示什么? 向上箭头表示本地有提交(commit),但是还没有推(push)到远程代码库中,旁边的数字表示本地commit的次数: 向下箭头表示你拉(fetch)下 ...
- keras 与tensorflow 混合使用
keras 与tensorflow 混合使用 tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > t ...
- MySQL 调优 —— Using filesort
出现这个问题的解决办法在于 MySQL 每次查询仅仅能使用一个索引, 而你的 SQL 语句 WHERE 条件和 ORDER BY 的条件不一样, 索引没建好的话. 那么 ORDER BY 就使用不到索 ...
- apache禁止訪问某些文件或文件夹的方法
[apache配置禁止訪问] 1. 禁止訪问某些文件/文件夹 添加Files选项来控制,比方要不同意訪问 .inc 扩展名的文件,保护php类库: <Files ~ "\.inc$&q ...
- sap scriptfom 多语言翻译
在某项目中,因为客户上线较早,非常多打印程序的form是由scriptform制做,又因为美国工厂要上线.免不了对scriptform进行多语言翻译.以下是对当中的一个交货单打印进行的多语言翻译,分享 ...
- Java时间转换
package com.fh.util; import java.sql.Timestamp; import java.text.DateFormat; import java.text.ParseE ...
- luogu1197 [JSOI2008]星球大战
题目大意 有一个无向图,每次删除一个节点,求删除后图中连通块的个数.(如果两个星球可以通过现存的以太通道直接或间接地连通,则这两个星球在同一个连通块中) 题解 连通块?用并查集可以找到一个连通块,但是 ...
- hdoj--5100--Chessboard(数学推理)
Chessboard Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- 画板(适用于手机、PC端)
Html代码 <script type="text/javascript" src="jquery-1.9.1.min.js"></scrip ...