zoukankan      html  css  js  c++  java
  • vue 项目 tab切换共用相同组件不刷新数据问题

    由于Vue会复用相同的组件, 将不在执行created, mounted之类的钩子, 这时候就需要通过设置路由钩子beforeRouteUpdate或者监听$route的变化来执行相关方法更新数据。如果不想要复用组件,可以根据需要进行如下设置。

    1.设置router-view 的key为$route.path
    从/user/foo => /user/bar, 由于这两个路由的$route.path并不一样, 所以组件被强制不复用,组件会执行created与 mounted中的内容。

    从/user?name=foo => /user?name=bar, 由于这两个路由的$route.path一样, 所以和没设置 key 属性一样, 会复用组件。

    2.设置router-view 的key为$route.fullPath
    从/user/foo => /user/bar 或者 /user?name=foo => /user?name=bar , 由相应前后跳转的两个路由的$route.fullPath并不一样, 所以组件被强制不复用。这也意味着组件的生命周期钩子会再次被调用,created与 mounted中的内容会被执行。

    <router-view>不设置key
    首先,vue会复用相同组件,对于路由有多个子路由来说,当在子路由来回切换时,会导致页面不刷新的问题,这是因为不再执行created和mounted这些钩子函数,可以通过watch来监听$route的变化从而加载不同的组件

    <router-view :key="$route.path">
    通过设置key值为$route.path,因为子路由的path不同,从而避免了组件复用,子路由间来回切换时,页面都会重新加载.

    遇到的问题
    在后台系统中,点击侧导航菜单子菜单时,设置了:key="$route.path"会导致菜单关闭又打开,视觉效果不好,不设置key就实现组件复用,不会出现那个bug

    sunshine15666
  • 相关阅读:
    oracle触发器
    oracle存储函数
    ****Java程序调用存储过程****
    oracle储存过程--存储过程
    oracle储存过程--游标
    oracle存储过程--流程控制(条件判断和循环遍历)
    InterviewProblems
    RandomAccessFile浅析
    JSP基础——关于中文乱码问题
    基础数据结构——单链表
  • 原文地址:https://www.cnblogs.com/xiaolucky/p/14657587.html
Copyright © 2011-2022 走看看