vue中push路由跳转只跳转路径，不跳转页面

最新推荐文章于 2024-05-09 10:39:13 发布
最新推荐文章于 2024-05-09 10:39:13 发布
阅读量9.4k 收藏 5
点赞数 6
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44029226/article/details/119573684
版权

vue中push路由跳转只跳转路径，不跳转页面

最近我在做毕设时，遇见了一种情况，就是我们从一个页面跳转到另外一个页面时，一般会在方法中去this.$router.push(’/xxx’)。这样就会跳转到我们在路由模块中所配置的页面及其对应的组件。
比如说这里

在这里插入图片描述

我们需要从当前的login页面跳转到home页面，下面是路由模块的配置

在这里插入图片描述

首先是要引入我们所写的home模块，然后对路由进行配置

在这里插入图片描述

这里配置好了我们直接进行跳转，但是却发生了只跳转路径，不跳转页面的情况发生

在这里插入图片描述

这里的页面不为所动，我在网上查找了一下解决办法，发现问题出在app.vue里面

这是我修改前的app

在这里插入图片描述

这里可以看到我直接放的login组件，这样是没办法跳转的，解决办法只能是

在这里插入图片描述
把router-view放进去，这样就实现了页面和路由的跳转

在这里插入图片描述

当然，这种解决办法只适用于我这种情况，希望大家开发都能顺心顺意，不出bug哈哈哈哈！

茂茂睡不醒
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 使用this.$router.replace、this.$router.go、this.$router.push 等进行页面跳转不生效
絮落锦乡的博客
03-27 8332
一、问题描述 vue 在使用页面跳转的时候，发现页面总是不调转，或者地址变了，页面不刷新等问题 二、解决方案 1、排查页面是否使用了beforeRouteLeave ，如果使用了该函数，意味着路由被拦截下来进行处理了，这个时候做完逻辑处理后必须要加上 next() 函数，才能让路由继续跳转，否则页面将不会跳转。 2、排查页面是否报错，哪个方法未定义。 3、检查路由配置是否正常。 ...
vue页面跳转实现页面缓存操作
11-20
打野在A页面野区进行一波骚操作打了一只蓝爸爸，然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸，然后他又回到A野区，希望A野区还是只有一只蓝爸爸被打的状态，其他野没被偷 第一步 在路由里面设置需要缓存的...
Vue中this.$router.push()路由跳转页面并传值最常见两种方式
Xin6Yang的博客
09-27 6579
1. query传参 // query传参 // 传值 this.$router.push({ name: 'orderList', query: { conlltion: id }}) this.$router.push({path:'/orderList',query: {conlltion: id }}) // html取值 $route.query.conlltion // scr...
router.push刷新当前页面，停留在当前标签页不跳转到默认标签页
licongmingli的博客
12-04 303
首先使用了router.push传参query后，路由地址会先改变为’/flowcharts?activeKey=2’,再刷新当前页面（‘/flowcharts?activeKey=2’），就可以实现刷新并停在当前标签页！
vue3使用router.push无法跳转/跳转缓慢
最新发布
weixin_60831172的博客
05-09 470
把router.push跳转方式改为router.resolve方式跳转。
vue-router同路由$router.push不跳转一个简单解决方案
shykevin的博客
04-19 7137
一、概述 vue-router跳转一般是这么写： toCurrentPage: function(thisId){ this.$router.push({path:'/test ', query: { id: thisId, option: ""}}); } 但是当遇到，需要跳转同页面不同query的情况，上面的方法不起作用。当然了，从性能来说，理论上这种情况最佳的解决...
解决：this.$router.push跳转同一个页面，参数不同不跳转的问题
weixin_45865992的博客
05-19 1303
这里是跳转到的页面，queryData需要先在data里定义。
vue-router路由导航url已改变，但未跳转至对应组件
mmsmsmm的博客
08-25 3498
vue-router路由导航url已改变，但未跳转至对应组件
vue路由拦截及页面跳转的设置方法
08-27
在上面的代码中，我们使用 beforeEach 钩子函数来拦截路由跳转。当路由跳转时，我们首先判断目标路由是否需要登陆，如果需要登陆，则检查本地存储信息是否已经登陆，如果已经登陆，则允许路由跳转；否则，跳转至 ...
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是页面之间导航的关键。然而，有时开发者可能会遇到一种情况，即在同一个路由下，需要在用户再次点击菜单时强制刷新组件，以确保组件的状态被重置。Vue Router，Vue.js的官方路由管理器，提供了...
解决vue+router路由跳转不起作用的一项原因
11-20
如下所示： Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, ...补充知识：vue-router配置后地址栏输入跳转不
vue-router重写push方法,解决相同路径跳转报错问题
10-14
在Vue.js应用中，Vue-Router是一个至关重要的组件，它负责管理应用的路由，使得页面在不同的URL之间平滑切换。然而，在某些情况下，当尝试重定向到已激活的相同路径时，Vue-Router可能会抛出错误。为了解决这个问题...
vue3中，this.$router.push刷新当前页面，该页面不重新加载需要手动刷新的解决方案
热门推荐
bbt953的博客
03-30 1万+
// 1-demo.vue 在this.$router.push('/demo')后，demo.vue没有刷新也没有重新加载，但是路由地址已经变了，只是需要手动刷新 // 2-解决 监听一下当前路由 watch: { $route (to, from) { // to表示要跳转的路由，from表示从哪儿跳的路由 to.path this.$router.go(0) }, }, // 以上是我目前可以解决我的问题的方法 // 以下记录百度搜到的，为了防止以后上述方法失效 //
关于vue-router 路径发生改变但页面并没有发生变化
coderghy的博客
03-19 1万+
问题描述： 假如当前路径为： http://localhost:8080/detail?goodsId=5e6de2ad3f9b1668a0f37e88 需要跳转路径为： localhost:8080/detail?goodsId=5e6de2573f9b1668a0f37e87 通过点击事件 this.router.push 发现虽然路径发生改变 但是页面并没有发生变化(刷新页面会改变)，此...
vue3使用router.push()页面跳转后，该页面不刷新问题
wang13679201813的博客
09-20 6570
这是一个常见问题，当使用push的时候，会向history栈添加一个新记录，这个时候，再添加一个完全相同的路由时，就不会再次刷新了。在页面跳转时加上params参数时间。在跳转到的页面，添加watch监视。
vue 路由发生了跳转但是界面没有任何反应
qq_33286757的博客
12-20 1万+
vue 路由发生了跳转但是界面没有任何反应，可能会父组件中<router-view></router-view>位置放的不合适。 今天做案列遇到一个问题，足足花了一个下午才解决了问题，但是终究的原因还是有些不理解 项目中我要从一级歌单列表页面跳转到歌单详情页面，用到的是子路由。 export default new Router({ routes: [ { path: '/recommend', name:'Recommend',
【vue3|第1期】路由router.push的使用以及问题分析与处理
Commas的博客
09-13 4550
页面跳转有很多方法，本次使用的是vue-router，但却在使用的时候遇到了点麻烦，所以记录下来，希望可以帮助有需要的人。
vue项目中如何让只请求路由地址,不跳转页面
05-01
在Vue项目中，如果只需要请求某个路由地址，而不需要跳转到该页面，可以使用Vue Router的programmatic navigation功能。这个功能允许我们在不通过页面链接的方式下，导航到不同的路由地址。 我们可以通过在Vue组件中调用$router.push方法来实现该功能。例如： ``` this.$router.push({ path: '/example' }) ``` 以上代码将会在当前路由地址下新增一个历史记录，并跳转到example路由地址。但是，如果我们只是需要请求example路由地址的API接口，我们可以设置options中的replace参数为true，如下所示： ``` this.$router.push({ path: '/example', replace: true }) ``` 这样，在请求example路由地址的同时，不会新增历史记录，也不会导致页面跳转。同时，我们还可以在$route对象中获取到当前路由信息，例如： ``` console.log(this.$route.path) // 输出 "/example" ``` 总之，通过Vue Router的programmatic navigation功能，我们可以很方便地只请求某个路由地址，而不需要跳转页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

茂茂睡不醒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值