详解vue 路由跳转四种方式 (带参数)


Posted in Javascript onApril 28, 2019

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可为正整数或负整数

ps : 区别

this.$router.push

跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)

向前或者向后跳转n个页面,n可为正整数或负整数

总结

以上所述是小编给大家介绍的详解vue 路由跳转四种方式 (带参数),希望对大家有所帮助,如果大家有人疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
JavaScript入门基础
Aug 12 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
angular动态表单制作
Feb 23 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
微信小程序工具函数封装
Oct 28 Javascript
vue实现井字棋游戏
Sep 29 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 #Javascript
详解VUE项目中安装和使用vant组件
Apr 28 #Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 #Javascript
vue slot与传参实例代码讲解
Apr 28 #Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 #Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 #Javascript
You might like
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
全面了解Python环境配置及项目建立
2016/06/30 Python
python图片验证码生成代码
2016/07/02 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python导入pandas具体步骤方法
2019/06/23 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
大学生活动总结怎么写
2014/04/29 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
中职招生先进个人材料
2014/08/31 职场文书
暑假打工感想
2015/08/07 职场文书
pt-archiver 主键自增
2022/04/26 MySQL