Vue中输入无效的网址后并重定向后,主界面menu菜单无法展开

suncs2001 2019-09-26 08:03:58
主界面左侧导航栏,点击menu,menu下有3个子菜单,正常情况下会向下弹出,显示3个子菜单。
但是如果浏览器输入过无效的网址,比如“localhost:8080”(后面没有"/"什么的),那么由于我设置了重定向,所以会重定向到login(http://localhost:8080/#/login),在login里 点击按钮,通过this.$router.push({path: '/main'}), 进入到主界面,问题是在这种情况下,点击menu则不会向下弹,没反应了。

而且在出现问题后,感觉浏览器进入了什么异常状态,再次输入http://localhost:8080/#/login能显示login界面,点击按钮仍然能跳转到主界面,但是menu不展开,此时如果重新刷新一下主界面(http://localhost:8080/#/main)则menu能正常展开了。

如果启动浏览器后,不输入无效的网址,直接输入主界面,则没问题。

不知道哪里出了问题,怀疑是跟输入的不完全网址有关系,导致浏览器处于什么状态了。不知道怎么定位
...全文
177 点赞 收藏 7
写回复
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
console.log( ) 2020-01-09
引用 6 楼 suncs2001 的回复:
问题没解决,因为后面没有在Vue下使用bootstrap了,改成elementUI了,所以问题也不存在了。 问题应该是vue与jquery的冲突问题,毕竟两个算是同级别的东西同时存在于一个项目中。 这种坑对于我们前端能力薄弱的部门来说不能踩下去,即使这个问题解决了后面不知道还有多少坑,所以后面果断换了。 可能有的bootstrap项目专门做过Vue的适配,会好些吧。还是感谢所有回复的同学。
在vue一般不用jquery 不推荐 但确实是能用 你的问题可能跟生命周期有关 ,jquery代码在Mounted周期内进行,此时vue已经渲染完毕,jquery才可以找到对应的DOM,如果需要jquery更新DOM,则在Mounted周期内不被允许,需要通过Updated进行操作
回复
suncs2001 2020-01-09
问题没解决,因为后面没有在Vue下使用bootstrap了,改成elementUI了,所以问题也不存在了。
问题应该是vue与jquery的冲突问题,毕竟两个算是同级别的东西同时存在于一个项目中。 这种坑对于我们前端能力薄弱的部门来说不能踩下去,即使这个问题解决了后面不知道还有多少坑,所以后面果断换了。
可能有的bootstrap项目专门做过Vue的适配,会好些吧。还是感谢所有回复的同学。
回复
NANU-NANA 2019-10-10
多用断点和console查看。 如果问题已解决,就结帖吧。
回复
jio可 2019-09-27
路由里面没有配置/路由吧
回复
suncs2001 2019-09-27
仔细看了下,确实有异常,因为以前没搞过web,有些东西不知道。今天发现可以用chrome单布调试,里面有个出现异常时断住的功能,打开这个功能确实能断住异常,应该是在vue内部出现异常了。经过反复对比,有这个异常就不能弹出菜单,没有这个异常就可以正常弹出,所以应该是跟这个异常有关。
这个异常出现在vue-router.esm.js中,会进入onAbort(err);这一行

History.prototype.transitionTo = function transitionTo (
location,
onComplete,
onAbort
) {
var this$1 = this;

var route = this.router.match(location, this.current);
this.confirmTransition(
route,
function () {
this$1.updateRoute(route);
onComplete && onComplete(route);
this$1.ensureURL();

// fire ready cbs once
if (!this$1.ready) {
this$1.ready = true;
this$1.readyCbs.forEach(function (cb) {
cb(route);
});
}
},
function (err) {
if (onAbort) {
onAbort(err);
}
if (err && !this$1.ready) {
this$1.ready = true;
this$1.readyErrorCbs.forEach(function (cb) {
cb(err);
});
}
}
);
};

在出现异常的时候,看this.current 是undefine的,正常应该不是undefine才对。为什么会进入这一行还不清楚原因,正在分析中。
回复
suncs2001 2019-09-26
没有异常,反正F12里 console里看不出异常。 我感觉好像是vue的路由啥地方有问题,特别是输入的网址如果不在路由表中的时候,是不是会导致界面无法响应什么
回复
NANU-NANA 2019-09-26
难道没有任何错误信息么?
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告