zoukankan      html  css  js  c++  java
  • vue登录插件引来的后续问题

    上次介绍了下写的登录弹框插件,过了几天发现点击去注册或者改密码的跳转失效。报错this.$router.push is not a function,继续打印this.$router也是undefined

    (可以先看一下上一篇博客提到的弹框登录插件)

    this.$router.push({ path:'/register'})

    尝试了很久,试了三种方法。

    需要注意的是:登录弹框是通过this.$login调用方法来动态插入组件的,这个登录弹框不在路由的组件管理范围内。

    第一:引入子路由,需要加router-view

    但是这样是作为子路由的方式,给当前赋值了路由对象。页面会出现重叠。

    第二种:在main.js里把路由对象设为window对象下的某值

    然后再loginBod.vue里调用。

    结果也能跳转。

    但是弹框还在,上面解释过了,路由切换卸载和动态加载不同的组件,但登录弹框是手动挂载上去的,所以需要手动去卸载。

    第三种:直接用window.replace

    路由router跳转的话,会根据路由对象动态的卸载挂载组件,所以弹框会保留。这种做法是提高性能减少消耗的。默认的路由哈希模式,是去操作哈希值重新定位路径,但是始终是由vue来操作对应的组件资源的。

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

    顺便提一下这个点:记住一句话,如果本地跑没问题,推上正式有问题,百分之99都是资源路径的问题。

    但是通过window.locaiton.replace,replace() 方法可用一个新文档取代当前文档,Dom直接删除,然后重新加载对应的路径资源。

    总结:以上方式,推荐第二种,采用路由跳转,而且手动去卸载,针对性的符合场景式去做解决。

    反思:找了半天没明白为什么会没有router对象,routerConfig也写了,只能去先找解决方法,有路过的大神多多指教。

  • 相关阅读:
    Struts2中ModelDriven的使用
    Android 如何让 app 自行处理 power key M
    url后面带斜杠与不带斜杠的区别
    Http Request Method:options
    org.springframework.boot.builder.SpringApplicationBuilder.<init>
    Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
    git将多个commit合并成一个
    idea error:Command line is too long
    java使用zxing插件绘制二维码
    git解决冲突插件之Beyond Compare
  • 原文地址:https://www.cnblogs.com/hjj2ldq/p/9475381.html
Copyright © 2011-2022 走看看