1.query方式传参和接受参数

 传参
this.$router.push({
path:'/xxx'
query:{
idname:id
}
})
接收的方式:this.$route.query.id

2.params方式传递参数

 传参:
2 this.$router.push({
3 name:'路径名称'
4 query:{
5 idname:id
6 }
7 })
接收的方式:this.$route.params.id

3.query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

关于vue-router 中参数传递的那些坑(params,query)的更多相关文章

  1. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  2. vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)

    详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...

  3. vue router的嵌套使用与传值的query方式

    嵌套路由 当我们不满足与 /home这种路由,而是希望通过 /home/news和/home/message访问一些内内容 那么就需要嵌套路由了 实现嵌套路由有两个步骤: ·创建对应的子组件,并且在路 ...

  4. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  5. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  6. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  7. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  8. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  9. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. mysqli_fetch_array() ,mysqli_fetch_assoc()遇到的问题

    该函数每运行一次就会读取一行数据. $book1_imgnum="select * from book_img limit 12"; $book1_totalimg=mysqli_ ...

  2. 高通方案的Android设备几种开机模式的进入与退出

    高通方案的Android设备主要有以下几种开机模式,Android.EDL.Fastboot.Recovery和FFBM,其进入及退出的方式如下表. 开机模式 屏幕显示 冷启动 热启动 按键退出 命令 ...

  3. javaFX笔记----ComboBox模仿qq账号下拉框删除账号

    myComboBox.setCellFactory( new Callback<ListView<String>, ListCell<String>>() { @O ...

  4. Review: Command-line about Git

    Git shanzm

  5. SQLServer之创建Transact-SQL游标

    什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...

  6. EOS开发环境搭建

    EOS开发环境搭建   在上一篇文章<扒一扒EOS的前世今生>中,我们已经了解了EOS以及他的创始人Daniel Larimer的故事,本次为大家带来的是关于EOS开发环境搭建的内容.首先 ...

  7. docker下编译mangoszero WOW60级服务端(三)

    开始构建WOW服务端通用镜像 第二篇文章中准备工作环节已经从github拉取了mangosd源代码,这里我们就可以直接开始编写dockerfile并进行编译 (1) 进入mangos/wow60/ma ...

  8. WPF软件开发系统之四——医疗病人信息管理系统

    仿360悬浮窗的方式,始终有个工具栏浮在桌面的最顶层,方便任何时候操作. 主要功能包括:病人信息的添加.修改.查询.包括别人基本信息.诊断结果.接待医生.手术多张图片等. 系统特点:简洁.易操作.美观 ...

  9. Ubuntu 16.04 安装Google 浏览器

    Ubuntu安装好后,自带Firefox浏览器,有时我们需要再安装几个浏览器,那么Google Chrome,就是首选, 安装如下: 下载浏览器安装包, 下载链接:https://dl.google. ...

  10. SpringCloud微服务Zuul跨域问题

    目前项目结构是VUE做前端,后端采用微服务架构,在开发时前端需要跨域请求数据,通过ZuulFilter配置解决了简单跨域请求需要.但当需要在请求的header中增加token信息时,出现了请求失败的情 ...