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能正常展开了。

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

不知道哪里出了问题,怀疑是跟输入的不完全网址有关系,导致浏览器处于什么状态了。不知道怎么定位
...全文
616 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
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
  • 打赏
  • 举报
回复
难道没有任何错误信息么?

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧