vue 路由跳转返回上一级

最新推荐文章于 2024-05-14 11:20:12 发布
最新推荐文章于 2024-05-14 11:20:12 发布
阅读量2.7w 收藏 3
点赞数 8
分类专栏： vue 文章标签： vue 路由跳转 返回上一级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wh13267207590/article/details/97919216
版权

两种方案：

1、 this.$router.go(-1)

2、this.$router.push('/xxx') 最常用 或者this.$router.push({name:'xxx'})对象的方法

分析两种方案，方案一，返回的是上一级，从哪来回哪去；方案二则是可以指定路由，个人经验，谨慎用方案一

沙子揉碎在眼睛里
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发： 路由跳转页面详解
软贱开发攻城狮
02-07 4014
在前端开发的时候，路由跳转是非常经典的知识点之一，对于刚入门的开发者来说，可能会一知半解，那么本篇博文就来分享一下前端开发过程中路由跳转的使用，以及在路由跳转中可能会遇到的问题和注意事项，该知识点比较基础，技术大牛就不要进来看了，只分享给有需要的人。 先来分享路由实现页面跳转的方式：方法一：通过JS实现页面跳转，方法二：通过<router-link>实现页面跳转。 方法一：通过JS实现页面跳转的方法 1、首先在template模块里面实现需要跳转的地方，如: <button cla
vue路由跳转时判断用户是否登录功能的实现
08-29
"vue路由跳转时判断用户是否登录功能的实现" 这篇文章主要讲解了如何在 Vue 中实现路由跳转时判断用户是否登录的功能。下面我们将详细讲解该功能的实现步骤： Step 1: 使用 Vuex 管理用户登录状态 在实现用户登录...
vue浏览器返回监听
热门推荐
不求甚解的博客
08-14 4万+
分享页面时，希望点击浏览器回退按钮，回到项目首页，增加访问量。 需要监听浏览器的回退按钮，并阻止其默认事件。 具体步骤如下： 1、挂载完成后，判断浏览器是否支持popstate mounted(){ if (window.history &amp;&amp; window.history.pushState) { history.pushState(null, null, d...
Vue 路由 跳转【返回、刷新、跳转】
最新发布
2401_84094908的博客
05-14 353
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue路由跳转 返回上一级 this.$router.go(-1) 和返回到指定页面this.$router.push('/home')...
weixin_30270561的博客
10-14 3950
1，点击返回上一页<button @click="goback">goback</button> methods:{ goback(){} this.$router.go(-1)}2，点击跳转到/Foo2页面 <button @click="ToLink1">goback</button> ToLink1(){ this.$ro...
获取上一级路由名字
m0_60376759的博客
05-26 175
/ 获取上一级路由名字。
vue-router 获得上一级路由以及返回上一级路由的方法
weixin_30633507的博客
08-11 1万+
if (this.$store.state.previousRouter.name) { this.$router.push({name: this.$store.state.previousRouter.name}); } 　　PS：this.$store.state.previousRouter.name 为上一级路由。 转载于:https://www....
vue相同路由跳转强制刷新该路由组件操作
10-14
在`<router-view>`标签上绑定一个动态的`key`值，这将使得每次路由变化时，Vue会认为这是一个全新的组件，从而执行销毁和创建过程。可以在`<router-view>`中这样设置`key`： ```html $route.path + $route.query....
Vue路由跳转问题记录详解
08-30
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 实现路由跳转时更改页面title
10-16
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE this.$route 和 this.$router
weixin_42371145的博客
04-03 871
this.route和this.route 和 this.route和this.router ： this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它 this.$route.matched[0].name this.$router 是路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址 th...
Vue常见的路由返回上一级
Rick_and_mode的博客
09-03 2万+
通常在Vue当中，写电商案例，有时候需要返回到上一个页面，在这里我用的方式就是直接回到你写的上个页 其实常见的方法有三种 第一种 this.$router.go(-1) 这个的意思就是 返回的是上一级，从哪来回哪去 第二种方法 通过：this.$router.back() 来返回上一级 这个的意思是返回当前点击的上一级 或者就是第三种固定写法 this.$router.push('/xxx') 或者 this.$router.push({name:'xxx'}) 分析三种方案 方案一，返回的是上一级，
Vue路由二
coco_2233的博客
04-06 226
接着上一篇路由继续记录。
router对象和route对象
QZ9420的博客
12-07 524
在vue-router中的相关的api: 两个对象： router对象： new Router得到的对象 在所有的组件中都可以获取这个对象，是一个全局的对象 在组件中可以通过this.router来获取router对象。this.router来获取router对象。 this.router来获取router对象。this.router.push(path) 相当于点击标签 还可以返回之前的路由 this.router.replace(path)用新的路由，把老的路由替换掉，不可以返回之前的路由th
前端页面路由跳转方式详解
实泽有之，无泽虚之
03-30 1万+
本文总结以下几种前端页面路由的跳转方式：1.navigate;2.window.open;3.document.getElementById("a标签id").click();4.routerLink。
vue中$router.go(-1) 跳转之前判断有没有上级路由
sdsccyy的专栏
01-14 3501
返回上级路由 关闭当前页面
Vue路由跳转的四种方式
weixin_51345632的博客
08-26 444
声明式路由 1、router-link 不带参数的跳转 <router-link :to="{ name: 'xi' }">name方式</router-link> <router-link :to="{ path: 'ha' }">path方式</router-link> 在router-link中，如果是’/‘开始就是从根路由开始，如果开始不带’/’，则从当前路由开始。 带参数的跳转 <router-l...
vue中push路由跳转只跳转路径，不跳转页面
茂茂的博客
08-10 9439
vue中push路由跳转只跳转路径，不跳转页面 最近我在做毕设时，遇见了一种情况，就是我们从一个页面跳转到另外一个页面时，一般会在方法中去this.$router.push(’/xxx’)。这样就会跳转到我们在路由模块中所配置的页面及其对应的组件。 比如说这里 我们需要从当前的login页面跳转到home页面，下面是路由模块的配置 首先是要引入我们所写的home模块，然后对路由进行配置 这里配置好了我们直接进行跳转，但是却发生了只跳转路径，不跳转页面的情况发生 这里的页面不为所动，我在网上查找了一
vue路由跳转返回上一级的时候判断是否有上一级
08-19
在 Vue Router 中，你可以使用 `$router` 对象的 `go` 方法来实现返回上一级路由，并通过判断浏览器的历史记录长度来确定是否有上一级路由。 以下是一个示例代码，演示了在 Vue 组件中如何实现路由返回并判断是否有上一级路由： ```javascript // 在 Vue 组件中 export default { methods: { goBack() { if (this.$router.history.length > 1) { this.$router.go(-1); // 返回上一级路由 } else { // 没有上一级路由的处理逻辑 // 例如跳转到其他页面或显示提示信息 } } } } ``` 在上述示例中，我们定义了一个 `goBack` 方法，该方法首先判断 `$router.history` 的长度是否大于 1，如果大于 1，则表示有上一级路由，使用 `$router.go(-1)` 返回上一级路由；否则，表示没有上一级路由，你可以在这里添加你自己的处理逻辑，例如跳转到其他页面或显示提示信息。 在你的 Vue 组件中，你可以调用 `goBack` 方法来实现返回上一级路由的操作。例如，在按钮的点击事件中调用 `goBack` 方法： ```html <template> <div> <button @click="goBack">返回上一级</button> </div> </template> <script> export default { methods: { goBack() { if (this.$router.history.length > 1) { this.$router.go(-1); // 返回上一级路由 } else { // 没有上一级路由的处理逻辑 // 例如跳转到其他页面或显示提示信息 } } } } </script> ``` 在上述示例中，点击按钮时会调用 `goBack` 方法，据是否有上一级路由来执行相应的操作。如果有上一级路由，会返回上一级；否则，你可以在 `else` 分支中添加你自己的处理逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值