vue router 的路由传参 params 和 query 的 区别
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 的 区别相关推荐
- vue 路由传参 params 与 query两种方式的区别(转载)
vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
- vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
- Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
- Vue如何进行路由传参
Vue路由传参 params参数 router-link形式传参 编程式路由导航传参 query参数 router-link形式传参 编程式路由导航传参 params和query的区别 Vue路由传参 ...
- react路由:路由传参params、search、state
react路由:路由传参params.search.state(含二级路由和三级路由) 一.准备工作: 1.创建myProject05-router目录 2.创建清单文件, npm init ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 1 <ul class="table_ ...
- vue路由传参—params—query
1.Params的方式 类似于get请求,传递的数据会在浏览器地址显示 Params路由传参分为三步: 1.绑定参数 在你传参的路由绑定参数 2.发送数据 3.接收参数 在路由页面用this.$rou ...
- vue路由传参 params传参不能传对象
不能传对象,传对象的时候,刷新完数据会丢失 传递的是一个对象 但是: 跳转以后,刷新页面,数据会丢失,所以说不能传对象,会有问题
- postbody传参_post传参params与body的区别(@RequestParam和@RequestBody的区别)
1.axios post请求 Content-Type默认为 application/x-www-form-urlencoded,我们传递参数的时,params里面的参数(简单的对象,通过 &quo ...
最新文章
- 用python中的cv2库打开摄像头
- 应用安全与微软SDL-IT流程
- 写文章的时候,还是应该现在typora里面写,之后放在latex...因为typora好改
- dnspod-sr的安装和使用
- python获取当前时间的源代码_Python获取时间戳代码实例
- java 传递bean_如何将bean作为参数传递给JSP标记?
- 本地连接Linux工具
- Solidity编程 二 之Solidity安装
- android camera(3)--- 高通平台8916 camera移植
- 高清电脑手机壁纸任你选,每天不重样!
- 易语言html实现报表打印,易语言报表统计功能例程可打印
- 机器学习代码实战——朴素贝叶斯(实现垃圾邮件分类)
- Java开发笔记(一百四十三)FXML布局的基本格式
- Windows虚拟桌面
- IDEA的Mybatis插件
- 第七章 在51单片机上移植uc/os-2
- CDPSE-数据隐私解决方案工程师
- 华为设备常用软件包名
- 解决 Push failed: Unable to access 'https://github.com/...': Failed to connect ...Connection Refused
- 图片清晰度,分辨率,像素总结