vue跳转页面的几种方法(推荐)


Posted in Javascript onMarch 26, 2020

vue跳转不同页面的多种方法

1:router-link跳转

<!-- 直接跳转 -->
<router-link to='/testDemo'>
 <button>点击跳转2</button>
</router-link>
 
<!-- 带参数跳转 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
 <button>点击跳转1</button>
</router-link>
 
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
 <button>点击跳转3</button>
</router-link>

2:this.$router.push()

<template>
 <div id='test'>
 <button @click='goTo()'>点击跳转4</button>
 </div>
</template>
<script>
 export default{
 name:'test',
 methods:{
 goTo(){
 //直接跳转
 this.$router.push('/testDemo');
 
 //带参数跳转
 this.$router.push({path:'/testDemo',query:{setid:123456}});
 this.$router.push({name:'testDemo',params:{setid:111222}});
 }
 }
 }
</script>

params和query传参数有什么不一样??在地址栏中可以看到,params传参数时,地址栏中看不到参数的内容,有点像ajax中的post传参,query传参数时,地址栏中可以看到传过来的参数信息,有点像ajax的个体传参

如果单独传setId一个参数的时候,地址栏中的地址如下图:

vue跳转页面的几种方法(推荐) 

    第一种方式:path - query 传参

vue跳转页面的几种方法(推荐)

  第二种方式:name - params传参数

但是一般情况下,传参数是传递一个对象,当传递的是一个对象的时候,地址栏中的地址如下图:

vue跳转页面的几种方法(推荐) 

   第一种方式:path - query 传参

vue跳转页面的几种方法(推荐) 

  第二种方式:name - params传参数

3:a标签可以跳转么??可以跳转外部链接,不能路由跳转

<a href="https://www.baidu.com"><button>点击跳转5</button></a>

接收方怎么接收参数??this.$route.query.serid和this.$route.params.setid,以下举一个接收的例子

注意接收参数时是 $route 不是 $router 

<template>
 <div>
 testDemo{{this.$route.query.setid}}
 </div>
</template>

知识点补充:vue三种不同方式实现页面跳转

Vue:router-lin

<router-link to="/">[跳转到主页]</router-link>
 <router-link to="/login">[登录]</router-link>
 <router-link to="/logout">[登出]</router-link>

this.$router.push("/");

<button @click="goHome">[跳转到主页]</button>
export default {
 name: "App",
 methods: {
 // 跳转页面方法
 goHome() {
 this.$router.push("/");
 },
}

this.$router.go(1);

<button @click="upPage">[上一页]</button>
 <button @click="downPage">[下一页]</button>
 upPage() {
 // 后退一步记录,等同于 history.back()
 this.$router.go(-1);
 },
 
 downPage() {
 // 在浏览器记录中前进一步,等同于 history.forward()
 this.$router.go(1);
 }

代码示例:

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <router-view/>
 <router-link to="/">[跳转到主页]</router-link>
 <router-link to="/login">[登录]</router-link>
 <router-link to="/logout">[登出]</router-link>
 
 <!-- javascript跳转页面 -->
 <button @click="goHome">[跳转到主页]</button>
 
 <!-- 回到上一页 -->
 <button @click="upPage">[上一页]</button>
 <button @click="downPage">[下一页]</button>
 
 <!-- 回到下一页 -->
 
 </div>
</template>
 
<script>
 export default {
 name: "App",
 methods: {
 // 跳转页面方法
 goHome() {
 this.$router.push("/");
 },
 upPage() {
 // 后退一步记录,等同于 history.back()
 this.$router.go(-1);
 },
 downPage() {
 // 在浏览器记录中前进一步,等同于 history.forward()
 this.$router.go(1);
 }
 }
 };
</script>

总结

到此这篇关于vue不同方法跳转页面的几种方法的文章就介绍到这了,更多相关vue 跳转页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 #Javascript
JavaScript定时器使用方法详解
Mar 26 #Javascript
js实现时钟定时器
Mar 26 #Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 #Javascript
原生JS实现留言板
Mar 26 #Javascript
vue在线动态切换主题色方案
Mar 26 #Javascript
javascript实现简单搜索功能
Mar 26 #Javascript
You might like
php相当简单的分页类
2008/10/02 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
js 图片转base64的方式(两种)
2018/04/24 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
vue微信分享插件使用方法详解
2020/02/18 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python数据分析数据标准化及离散化详解
2018/02/26 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
在python中安装basemap的教程
2018/09/20 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python构建指数平滑预测模型示例
2019/11/21 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
中学生期中自我鉴定
2014/04/20 职场文书
小学生植树节活动总结
2014/07/04 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
保卫工作个人总结
2015/03/03 职场文书
警告通知
2015/04/25 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书