详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 |
1. router-link
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
2. this.$router.push() (函数里面调用)
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.id
3. 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.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。
3. this.$router.replace()
(用法同上,push)
4. this.$router.go(n) ()
this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数。
详解vue 路由跳转四种方式 (带参数)相关推荐
- vue路由跳转写法在html,详解vue 路由跳转四种方式 (带参数)
1. router-link 1. 不带参数 //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由 ...
- 详解vue 路由跳转四种方式(转载)
1.router-link 1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{pa ...
- 详解Java解析XML的四种方法
http://developer.51cto.com 2009-03-31 13:12 cnlw1985 javaeye 我要评论(8) XML现在已经成为一种通用的数据交换格式,平台的无关性 ...
- java按钮权限控制_详解Spring Security 中的四种权限控制方式
Spring Security 中对于权限控制默认已经提供了很多了,但是,一个优秀的框架必须具备良好的扩展性,恰好,Spring Security 的扩展性就非常棒,我们既可以使用 Spring Se ...
- 详解MySQL双活同步复制四种解决方案
详解MySQL双活同步复制四种解决方案 参考文章: (1)详解MySQL双活同步复制四种解决方案 (2)https://www.cnblogs.com/wuchangsoft/p/10390552.h ...
- 路由跳转四种方法(带参)
路由跳转四种方法(带参) 方式1.router-link 1. 不带参数<router-link :to="{name:'home'}"> <router-lin ...
- html正方形边框,详解HTML设置边框的三种方式
HTML设置边框的三种方式 border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green b ...
- Vue路由传参三种方式
Vue路由传参三种方式 params传参 路由属性配置传参 query传参 一.params传参 this.$router.push({ name:"admin", //这里的pa ...
- 详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
最新文章
- libcurl选项CURLOPT_WRITEDATA中的“坑”
- Oracle 11g dataguard三种模式以及实时查询(Real-time query)功能设置
- 张玉萍:数据科学的“融”,是学术中的“锦上添花” | 优秀毕业生专访
- LeetCode - Valid Sudoku
- Spring RestTemplate中几种常见的请求方式
- HTML5纯Web前端也能开发直播,不用开发服务器(使用face2face)
- SAP Spartacus里px,em和rem的应用
- 通过Katas进行Java教程:网球比赛(轻松)
- 函数dup和dup2
- 【leetcode❤python】172. Factorial Trailing Zeroes
- 第四范式:现代存储架构下的系统优化实践
- python使用技巧_python小技巧
- 计算机科学与技术毕业生简历,计算机科学与技术专业应届毕业生简历范文
- Android签名证书
- 关于WINDOWS超级终端的使用来调试MODEM,串口.
- mldn andoird
- 妙招教你Office Word 2007文档另存为PDF文件[转]
- 如何彻底卸载VMware
- 人脸活体检测人脸识别:眨眼+张口
- Android手机怎么开启原生虚拟按键-以小米手机为例,实现全面屏手势