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

//路由

{
path: '/detail', //这里不需要参入参数
name: "detail",
component: detail//这个details是传进来的组件名称
} 使用:
方法1:
<router-link :to="{ name: 'details', query: { id: 123 }}">
点击按钮
</router-link> 方法2:
<router-link :to="{ path: 'details', query: { id: 123 }}">
点击按钮
</router-link> 方法3:
this.$router.push({name:'details',query:{id:}}) 方法4:
this.$router.push({path:'details',query:{id:}}) 页面url显示结果是:http://localhost:8081/#/details?id=123 //接受参数 this.$route.query.id

一般来说,query要用path来引入,params要用name来引入。

2.params方式传参和接收参数

//路由

{
path: '/detail/:id/', //后面要带参数
name: "detail",
component: detail
} 使用:
方法1:
<router-link :to="{ name: 'details', params: { id: 123 }}">
点击按钮
</router-link> 方法2:
this.$router.push({name:'details',params:{id:}}) 页面url显示结果是:http://localhost:8081/#/details/123 //接受参数 this.$route.params.id

直白的来说 query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,

而 params相当于post请求,参数不会再地址栏中显示

注意点:

query 刷新不会丢失 query里面的数据
params 刷新 会会 丢失 params里面的数据

vue-router路由动态传参query和params的区别的更多相关文章

  1. vue路由传参query和params的区别(详解!)

    1.query使用path和name传参都可以,而params只能使用name传参. query传参: 页面: this.$router.push({ path:'/city',name:'City' ...

  2. vue 路由动态传参 (多个)

    动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.para ...

  3. Vue-路由传参query与params

    注明:vue中 $router 和 $route 的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router. ...

  4. Vue配置路由和传参方式及路由守卫!

    安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let ...

  5. 路由传参 query 和 params

    vue路由传参分为两种情况: 一.query和params传参的区别: 1.query传参显示参数,params传参不显示参数,params相对于query来说较安全一点. 2.取值方法也有不同:qu ...

  6. vue.js路由嵌套传参

    通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,

  7. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  8. vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  9. Vue-admin工作整理(四):路由组件传参

    路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...

随机推荐

  1. NodeJS脚本启动工具总结

    1. 使用npm 2. 使用pm2 安装: npm install pm2 -g 启动: NODE_ENV=test pm2 start newsCrawler.js 停止: pm2 stop new ...

  2. Msi中文件替换

    转自https://blog.csdn.net/davidhsing/article/details/9962377 ※说明:目前可以用于MSI编辑的软件很多,但是有些软件在保存时会在MSI文件中写入 ...

  3. zabbix SNMP OID列表

    系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...

  4. python并发编程之协程知识点

    由线程遗留下的问题:GIL导致多个线程不能真正的并行,CPython中多个线程不能并行 单线程实现并发:切换+保存状态 第一种方法:使用yield,yield可以保存状态.yield的状态保存与操作系 ...

  5. @WebFilter注解

    @WebFilter @WebFilter 用于将一个类声明为==过滤器==,该注解将会在部署时被容器处理,容器将根据具体的属性配置将相应的类部署为过滤器.该注解具有下表给出的一些常用属性 ( 以下所 ...

  6. 第三篇--创建.gitignore文件

    小知识 ·  git add -A  提交所有变化 ·  git add -u  提交被修改(modified)和被删除(deleted)文件,不包括新文件(new) ·  git add .  提交 ...

  7. virtualbox+ubuntu

    https://jingyan.baidu.com/article/7f766daff541cd4101e1d0cd.html ubuntu 安装 这台计算机似乎没有安装操作系统 待解决 注意ubun ...

  8. python7 数据类型的相互转化 字符编码

    复习 1.深浅拷贝    ls = [1, 'a', [10]]    值拷贝:直接赋值 ls1 = ls, ls中的任何值发生改变,ls1中的值都会随之改变    浅拷贝:通过copy()方法 ls ...

  9. IntelliJ IDEA 2017新工具

    IntelliJ IDEA 2017 教程之概述 图文详解如何安装 Intellij IDEA 2017 深入剖析 IntelliJ IDEA 2017 的目录结构 图文详解如何配置 IntelliJ ...

  10. Kubernetes之调度器和调度过程

    scheduler 当Scheduler通过API server 的watch接口监听到新建Pod副本的信息后,它会检查所有符合该Pod要求的Node列表,开始执行Pod调度逻辑.调度成功后将Pod绑 ...