vue跳转页面的几种常用方法

这篇具有很好参考价值的文章主要介绍了vue跳转页面的几种常用方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

vue跳转不同页面的方法

1.router-link跳转

2.this.$router.push()

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

vue三种不同方式实现跳转页面

Vue:router-link

this.$router.push("/")

this.$router.go(1)

代码示例:

vue跳转不同页面的方法

1.router-link跳转

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

2.this.$router.push()

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

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

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

接收:this.$route.query.serid 和 this.$route.params.setid

vue三种不同方式实现跳转页面

Vue:router-link

 <router-link to="/">[跳转到主页]</router-link>
 <router-link to="/login">[登录]</router-link>
 <router-link to="/logout">[登出]</router-link>
this.$router.push("/");

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>文章来源地址https://www.toymoban.com/news/detail-677616.html

到了这里,关于vue跳转页面的几种常用方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js有哪些常用的跳转页面方法(补)

    在JavaScript中,常用的跳转页面方法包括: 使用location对象的href属性跳转页面: 使用location对象的replace方法跳转页面(不会在浏览器历史记录中留下记录): 使用window对象的open方法打开新窗口或标签页: 使用a标签的click方法模拟点击跳转: 使用setTimeout函数延时跳转页面:

    2024年04月09日
    浏览(34)
  • uniapp页面跳转的几种方式

    定义:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 使用: 定义:可以关闭当前界面并跳转到其他的非tabbar界面(可带参数) 使用: 定义:关闭所有页面,打开到应用内的某个页面(可带参数) 使用: 定义:跳转到 tabBar 页面,并关闭其

    2024年02月01日
    浏览(47)
  • Vue数据更新页面却没有更新的几种情况以及解决方法

    原因:由于 Vue 会在初始化实例时对 data中的数据执行 getter/setter 转化,所以 变量必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 例如:  1 2 3 4 5 new Vue({    data:{},    template: \\\'div{{message}}/div\\\' }) this .message = \\\'Hello world!\\\' // `message` 不是响应式的页面不会发生变化 解决方

    2024年02月03日
    浏览(58)
  • 【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

    目录 一、Vue监控路由 1、Vue中watch监控路由 2、Vue中watch监控路由的某一个参数 3、Vue中watch同时监控多个路由 二、刷新当前页面数据 1、location.reload 2、$router.go(0) 3、this.$router.resolve()与this.$router.resolve() a、this.$router.resolve() b、this.$router.push() 三、示例场景 四、往期相关优质推荐

    2024年02月08日
    浏览(54)
  • taro跳转页面传参的几种方式

    我之前在网上也搜了挺多taro传参的方式,这里我总结一下 路由跳转分Taro.navigateTo与Taro.redirectTo, 但是这两种方法只适用于传递少量参数 Taro.navigateTo跳转时是将新的页面加载过来,最多加载到10层,返回时去的是上一页; Taro.redirectTo跳转的同时将当前页面销毁,返回时去的是

    2024年02月07日
    浏览(45)
  • uniapp页面跳转的几种方式 以及举例(2)

    又来混时长 嫖流量卷了 保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack 可以返回到原页面。   关闭当前页面,跳转到应用内的某个页面。   关闭所有页面,打开到应用内的某个页面。 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 关闭当前页面,返回上一

    2024年01月19日
    浏览(45)
  • Vue路由跳转的几种方式

    跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面。 用法同上,但是跳转到指定的url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面,上一个记录是不存在的。 浏览器在解析时,将它解析成一个类似于a标签。 router-link:可以一个组

    2024年02月06日
    浏览(49)
  • vue中路由跳转的几种方式

    2、第二种也是比较常见的,使用标签跳转: 3、第三种是使用replace跳转: 4、第四种是使用go方式跳转:

    2024年02月11日
    浏览(54)
  • 利用vue-router跳转的几种方式

    ​1 router-link 2 this.$router.push     跳转到指定路径,并将跳转页面压入history栈中,也就是添加了一个页面记录。 3 this.$router.replace     跳转到指定路径,将history栈中的当前页面替换为跳转到的页面。 4 this.$router.go(n)     在histroy栈中向前或者向后跳转n个页面,n可为正整数或负

    2024年02月12日
    浏览(49)
  • JS常用的几种事件

    JavaScript常用的几种事件有: 点击事件 :当用户点击某个元素时触发,常用于按钮、链接等交互元素。事件名称为\\\"click\\\"。 鼠标移动事件 :当用户将鼠标指针移动到某个元素上时触发,事件名称为\\\"mouseover\\\"。 鼠标离开事件 :当用户将鼠标指针从某个元素上移开时触发,事件名

    2024年01月22日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包