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 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
vue使用Sass时报错问题的解决方法
Oct 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python中实现switch功能实例解析
2018/01/11 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
virtualenv介绍及简明教程
2020/06/23 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
元旦联欢会主持词
2014/03/26 职场文书
初婚初育证明范本
2014/11/24 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python