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

 更新时间:2020年03月26日 17:28:48   作者:Janus_lian  
这篇文章主要介绍了vue不同方法跳转页面,本文给大家分享多种方法,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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一个参数的时候,地址栏中的地址如下图:

 

    第一种方式:path - query 传参

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

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

 

   第一种方式:path - query 传参

 

  第二种方式: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 跳转页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue实现搜索结果高亮显示关键字

    Vue实现搜索结果高亮显示关键字

    这篇文章主要为大家详细介绍了Vue实现搜索结果高亮显示关键字,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Vue中methods的this指向问题浅析

    Vue中methods的this指向问题浅析

    相信我们写Vue代码时肯定都会在methods中用过this这个关键字,甚至还打印过this查看其内容。最终发现该实例对象竟然是我们的Vue实例对象
    2022-10-10
  • Vue3+Vite+ElementPlus管理系统常见问题

    Vue3+Vite+ElementPlus管理系统常见问题

    本文记录了使用Vue3+Vite+ElementPlus从0开始搭建一个前端工程会面临的常见问题,没有技术深度,但全都是解决实际问题的干货,可以当作是问题手册以备后用,感兴趣的朋友参考下
    2023-12-12
  • Vue中this.$nextTick()的具体使用

    Vue中this.$nextTick()的具体使用

    本文主要介绍了Vue中this.$nextTick()的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue+elementui 对话框取消 表单验证重置示例

    vue+elementui 对话框取消 表单验证重置示例

    今天小编就为大家分享一篇vue+elementui 对话框取消 表单验证重置示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • el-element中el-table表格嵌套el-select实现动态选择对应值功能

    el-element中el-table表格嵌套el-select实现动态选择对应值功能

    这篇文章主要给大家介绍了关于el-element中el-table表格嵌套el-select实现动态选择对应值功能的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-01-01
  • Vue自定义复制指令 v-copy功能的实现

    Vue自定义复制指令 v-copy功能的实现

    这篇文章主要介绍了Vue自定义复制指令 v-copy,使用自定义指令创建一个点击复制文本功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • Vue报错error:0308010C:digital envelope routines::unsupported的解决方法

    Vue报错error:0308010C:digital envelope routines::unsupported

    这篇文章主要给大家介绍了关于Vue报错error:0308010C:digital envelope routines::unsupported的解决方法,文中通过图文将解决的办法介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vant toast 关闭栈溢出问题及解决

    vant toast 关闭栈溢出问题及解决

    这篇文章主要介绍了vant toast 关闭栈溢出问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 利用Vue3封装一个弹框组件简单吗

    利用Vue3封装一个弹框组件简单吗

    最近在项目中自己封装的一个记录一下,下面这篇文章主要给大家介绍了关于利用Vue3封装一个弹框组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12

最新评论