this.$router.push点了后hash地址改变了,页面却不跳转

在Vue应用中遇到一个问题,当使用`this.$router.push('/login')`尝试从admin页面跳转到login页面时,虽然URL的hash部分改变,但页面并未实际跳转。经过排查,发现需要在App.vue文件中添加`<router-view>`组件来实现页面渲染。在移除App.vue中其他代码并添加`<router-view>`后,点击按钮成功实现了页面跳转。
摘要由CSDN通过智能技术生成

今天在写代码的时候,爆出了一个问题,在我使用this.$router.push的时候,hash地址改变了,但是页面却不发生跳转。

地址从admin跳转到了login后,仍然没有发生改变

 <van-button type="success" class="" @click="reset">重置</van-button>

  <van-button type="primary" class="" @click="login">登录</van-button>

 给它绑定一个事件:

reset(){

            this.username = '';

            this.password = '';

        },

        login(){

            if(this.username === 'likaicheng' && this.password === '666666'){

                // 1.存储token

                localStorage.setItem('token','Bearer xxxx')

                // 2.跳转到后台主页

                this.$router.push('/login' )

            }else{

                // 登录失败

                  localStorage.removeItem('token')

            }

        }

将main.js的显示页面改为App.

 加上<router-view>才能跳转页面,具体的做法是首先在App.vue中删除其他的代码,只加上router-view。

 之后点击之后,页面发生改变了。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

爱你三千遍斯塔克

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

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

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

打赏作者

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

抵扣说明:

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

余额充值