• 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
  • 相关阅读:
    [转]K/3加密控制规则
    修改Delphi2009的界面风格
    [转]软件版本号讲解: 什么是Alpha, Beta, RC
    百度程序题目连续数问题
    得到正整数a的16进制表示
    四舍五入至某小数位后返回数字串
    返回相同宽度数字型字符串
    百度程序题目连续数问题 另解
    求二进制表示中1的个数
    六支筷子取其二,恰为一双的概率
  • 原文地址:https://www.cnblogs.com/xiaolucky/p/14657587.html
Copyright © 2020-2023  润新知