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 } ...
随机推荐
- [bzoj3037/2068]创世纪[Poi2004]SZP_树形dp_并查集_基环树
创世纪 SZP bzoj-3037/2068 Poi-2004 题目大意:给你n个物品,每个物品可以且仅可以控制一个物品.问:选取一些物品,使得对于任意的一个被选取的物品来讲,都存在一个没有被选取的物 ...
- MyBatis 3在XML文件中处理大于号小于号(<>)的方法(转)
说明:以下方式支持XML和注解的方式. 一. 用了转义字符把>和<替换掉. AND start_date <= CURRENT_DATE AND end_date >= CUR ...
- AngularJS:实现页面滚动到底自动加载数据的功能
要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...
- java 的collection
参考:http://skyuck.iteye.com/blog/526358 https://www.tutorialspoint.com/java/java_collections.htm Prio ...
- POJ 3370 Halloween treats 鸽巢原理 解题
Halloween treats 和POJ2356差点儿相同. 事实上这种数列能够有非常多,也能够有不连续的,只是利用鸽巢原理就是方便找到了连续的数列.并且有这种数列也必然能够找到. #include ...
- Android之怎样使用ListView列表视图
ListView 列表视图创建方法: (1)直接使用ListView 组件创建 (2)让Activity继承ListActivity实现 第一种:在XML中直接使用ListView 组件创建 在val ...
- discuz新的单点论坛(不依赖UCenter)
discuz 本身提供UCENTER用户中心能够实现单点登录. 可是其它应用要单点登录到discuz还是存在若干问题: 须要2次激活.可能造成server无响应,论坛显示的最新注冊用户无法同步更新,官 ...
- Codeforces Round #250 Div. 2(C.The Child and Toy)
题目例如以下: C. The Child and Toy time limit per test 1 second memory limit per test 256 megabytes input ...
- mysql 修改和删除 权限设置
SET SQL_SAFE_UPDATES = 0; update和delete操作将会顺利执行 SET SQL_SAFE_UPDATES = 1; (安全更新模式(safe update mode)) ...
- 【CTSC 2007】 数据备份
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1150 [算法] 首先,有一个很显然的结论 : 如果要使距离和最小,必须选择相邻的办公 ...