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 } ...
随机推荐
- MySQL的limit用法及优化(转)
常规用法: 用法一: OFFSET ; 比如这个SQL ,limit后面跟的是2条数据,offset后面是从第1条开始读取. 用法二: ,; 而这个SQL,limit后面是从第2条开始读,读取1条信息 ...
- keras与sklearn的结合使用
keras与sklearn的结合使用 新建 模板 Fly Time: 2017-4-14 引言 代码 引言 众所周知,keras目前没有提供交叉验证的功能,我们要向使用交叉验证,就需要与sklearn ...
- MDA模型定义及扩展
Tiny框架中.对模型本向没有不论什么强制性约束,也就是说你能够把不论什么类型的对象作为模型.也不必实现不论什么接口. 因此简单的说,你定义一个类.里面有一些描写叙述业务属性或处理的内容,就能够说它是 ...
- 使用butterknife注解project配置
使用butterknife注解的时候建议使用Jar包 Jar包下载地址:https://github.com/JakeWharton/butterknife Eclipseproject配置: 步骤一 ...
- hdu1325 Is It A Tree?(二叉树的推断)
Is It A Tree? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- Openfire 配置连接SQL SERVER(非默认实例)
安装好Openfire之后,紧接着进行配置. 连接数据库的时候遇上问题. 打算用我本机上的一个SQL SERVER做为数据库.但是,我本机装了几个SQL SERVER实例,现在我打算使用的是那个非默认 ...
- B1230 [Usaco2008 Nov]lites 开关灯 线段树
就是线段树维护异或和.之前我线段树区间修改down都是修改当前区间,结果debug出不来,改成每次向下了. 题干: Description Farmer John尝试通过和奶牛们玩益智玩具来保持他的奶 ...
- Python中的math和保留小数位数方法
转载自 http://xukaizijian.blog.163.com/blog/static/17043311920111163272414/ math模块实现了许多对浮点数的数学运算函数. 这些 ...
- layui富文本编译器后台获取图片路径
@RequestMapping("add") public ModelAndView add(News news){ ModelAndView mav = ne ...
- java多线程编程之synchronized
synchronized是用来解决多线程情况下的线程安全问题的,它可以修饰方法也可以修饰语句块 , 那么什么情况下是线程安全和线程不安全呢 ? 方法内的变量是线程安全的 , 类的实例变量是非线程安全的 ...