1. 不带参数<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。2.带参数<router-link :to="{name:'home', params: {id:1}}"> // params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留// html 取参 $route.params.id
// script 取参 this.$route.params.id<router-link :to="{name:'home', query: {id:1}}"> // query传参数 (类似get,url后面会显示参数)
// 路由可不配置// html 取参 $route.query.id
// script 取参 this.$route.query.id

1.  不带参数this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})2. query传参 this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})// html 取参  $route.query.id
// script 取参  this.$route.query.id3. params传参this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留// html 取参  $route.params.id
// script 取参  this.$route.params.id4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

this.$router.replace() (用法同上,push)
4.  this.$router.go(n) ()
this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
ps : 区别this.$router.push
跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数

转载于:https://www.cnblogs.com/wxqworld/p/11463082.html

vue router 的路由传参 params 和 query 的 区别相关推荐

  1. vue 路由传参 params 与 query两种方式的区别(转载)

    vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  ro ...

  2. vue 路由传参 params 与 query两种方式的区别

    vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  ro ...

  3. Vue路由传参params 与 query

    一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...

  4. Vue如何进行路由传参

    Vue路由传参 params参数 router-link形式传参 编程式路由导航传参 query参数 router-link形式传参 编程式路由导航传参 params和query的区别 Vue路由传参 ...

  5. react路由:路由传参params、search、state

    react路由:路由传参params.search.state(含二级路由和三级路由) 一.准备工作: ​ 1.创建myProject05-router目录 ​ 2.创建清单文件, npm init ...

  6. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 1 <ul class="table_ ...

  7. vue路由传参—params—query

    1.Params的方式 类似于get请求,传递的数据会在浏览器地址显示 Params路由传参分为三步: 1.绑定参数 在你传参的路由绑定参数 2.发送数据 3.接收参数 在路由页面用this.$rou ...

  8. vue路由传参 params传参不能传对象

    不能传对象,传对象的时候,刷新完数据会丢失 传递的是一个对象 但是: 跳转以后,刷新页面,数据会丢失,所以说不能传对象,会有问题

  9. postbody传参_post传参params与body的区别(@RequestParam和@RequestBody的区别)

    1.axios post请求  Content-Type默认为 application/x-www-form-urlencoded,我们传递参数的时,params里面的参数(简单的对象,通过 &quo ...

最新文章

  1. 用python中的cv2库打开摄像头
  2. 应用安全与微软SDL-IT流程
  3. 写文章的时候,还是应该现在typora里面写,之后放在latex...因为typora好改
  4. dnspod-sr的安装和使用
  5. python获取当前时间的源代码_Python获取时间戳代码实例
  6. java 传递bean_如何将bean作为参数传递给JSP标记?
  7. 本地连接Linux工具
  8. Solidity编程 二 之Solidity安装
  9. android camera(3)--- 高通平台8916 camera移植
  10. 高清电脑手机壁纸任你选,每天不重样!
  11. 易语言html实现报表打印,易语言报表统计功能例程可打印
  12. 机器学习代码实战——朴素贝叶斯(实现垃圾邮件分类)
  13. Java开发笔记(一百四十三)FXML布局的基本格式
  14. Windows虚拟桌面
  15. IDEA的Mybatis插件
  16. 第七章 在51单片机上移植uc/os-2
  17. CDPSE-数据隐私解决方案工程师
  18. 华为设备常用软件包名
  19. 解决 Push failed: Unable to access 'https://github.com/...': Failed to connect ...Connection Refused
  20. 图片清晰度,分辨率,像素总结

热门文章

  1. C语言—数组逆序(数组移位)
  2. 二维几何图形自由变换的思路(平移、缩放、旋转)
  3. Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED参数详解
  4. 如何发表一篇论文的摘要
  5. 操作系统安全-第五章-安全策略与安全模型
  6. 西邮linux兴趣小组2020年面试题 学习记录
  7. scrapy框架开发爬虫实战——反爬虫策略与反反爬虫策略
  8. C/C++实现栈的链式结构(链栈)
  9. Java项目http请求中文乱码
  10. c语言输出乘法口诀表