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. tomcat,httpd 日志格式说明

    tomcat 日志说明 配置文件server.xml 默认日志格式为 pattern="%h %l %u %t "%r" %s %b" 推荐使用 pattern ...

  2. Source-Based XSS Test Cases

    Single Reflection Case 01 - Direct URL Injection (no parameter) payload: https://brutelogic.com.br/x ...

  3. Openlayers系列(一)关于地图投影相关错误的解决方案

    背景 近期开发以MongoDB为基础的分布式地理数据管理平台系统,被要求做一个简单的demo给客户进行演示.于是笔者便打算向数据库中存储一部分瓦片数据,写一个简单的存取服务器,使用Openlayers ...

  4. 使用 Scrapy 爬取股票代码

    个人博客: https://mypython.me 源码地址: https://github.com/geeeeeeeek/scrapy_stock 抓取工具:scrapy scrapy 介绍 Scr ...

  5. Tomcat设置cmd窗口的title属性

    说明:官网下载tomcat之后,双击bin目录下的startup.bat文件,即可运行tomcat:linux下面运行startup.sh. 但是如果测试服务器上面搭建了多个项目,则启动之后窗口一样, ...

  6. hadoop wordcout测试

    hadoop wordcout测试 安装好hadoop 环境后,启动HDFS等服务:输密码 1004 start-all.sh 查看启动情况 1006 jps 1007 cd ~ 切换到用户默认目录 ...

  7. 添加python虚拟环境

    在我centos上装有两个python版本 # 我在~/py3/目录下创建虚拟环境,该目录为python3的一个独立环境 [root@localhost /]# cd home [root@local ...

  8. Maps JavaScript API的JavaScript代码

    要请求多个库,请用逗号分隔它们   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY& ...

  9. 你所不知道的ASP.NET Core MVC/WebApi基础系列(一)

    前言 最近发表的EF Core貌似有点多,可别误以为我只专攻EF Core哦,私下有时间也是一直在看ASP.NET Core的内容,所以后续会穿插讲EF Core和ASP.NET Core,别认为你会 ...

  10. openstack第一章:keystone

    第一篇keystone— 身份认证服务 一.Keystone介绍:       keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身 ...