VUE中关于this.$router.push 地址更新页面不跳转的问题


今天用vue做了一个登陆和注册的页面

1
2
3
4
5
6
7
<div class="btn-box">
            <a href="javascript:;" class="btn" @click="login">登录</a>
          </div>
          <div class="tips">
            <div class="sms" @click="register">手机短信登录/注册</div>
            <div class="reg">立即注册<span>|</span>忘记密码？</div>
          </div>

当时直接就给登陆和注册两个标签分别绑定了click事件

然后定义登陆click事件,进行页面跳转
发现了问题

1
2
3
4
5
6
7
8
9
10
11
12
methods: {
        login(){
            let { username,password } = this;
            this.axios.post('/user/login',{
                username,
                password
            }).then((res)=>{
                this.res = res
                this.$router.push('/index');
            })
        }
        }

定义好之后呢,我就去页面中尝试,就出现了问题
此时是登录页面
此时是登陆页面

点击登录点击登录
提示登陆成功提示登陆成功了
但是页面没有跳转
地址变成index了
在这里插入图片描述
我检查了很久的代码和路由,发现并没有任何的错误.
经过百度呢,大多都是说需要写一个watch监听
但我想正常的路由跳转,并不需要watch监听啊.
就开始了半个小时的找问题之路

我在console里发现当时有两个报错,
在这里插入图片描述
第一个是register方法未定义,当时也没有仔细关注这个问题,因为确实没有定义,
但第二个报错就有点意思了
这个直接引发了我的思考
是因为register方法没定义,所以导致click事件没有正常的使用?
于是我就注释掉了这行代码

1
2
3
4
5
6
7
<div class="btn-box">
            <a href="javascript:;" class="btn" @click="login">登录</a>
          </div>
          <div class="tips">
            <!-- <div class="sms" @click="register">手机短信登录/注册</div> -->
            <div class="reg">立即注册<span>|</span>忘记密码？</div>
          </div>

重新点击登录, 发现问题解决了

分享出来,希望能帮大家踩雷吧.