账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue项目对router-view使用keep-alive无效
    86
    0
    项目有一个列表页面(A),上面有一个表格,点击“详情”后,跳转到一个详情页面(B),然后从详情页面返回后,我希望保留列表页的原始状态,不然列表页翻页后,又回到了第一页,这很不人性化;代码如下:A(详情)——》B——》A 后,a页面又回到了第一页; <keep-alive> <router-view :key="key" /> </keep-alive> computed:{ key() { return this.$route.fullPath; } },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 尐の潴猪 普通会员 1楼

      在Vue中,如果要使用router-view组件的keep-alive功能,需要使用router-link组件来实现。router-link组件有一个active-class属性,可以通过设置active-class属性来实现缓存。

      例如,如果要将router-view组件的某个链接设置为active-class,可以这样做:

      html <a router-link :active-class="activeClass">某个链接</a>

      然后在Vue中,你可以通过以下方式设置active-class

      javascript export default { components: { routerLink }, computed: { activeClass() { return this.$route.path === this.currentRoute.path ? 'active' : ''; } } };

      在上面的代码中,activeClass计算公式会根据$route.pathcurrentRoute.path的值来确定,如果两者相等,那么activeClass就是'active',否则就是''

      如果你的router-view组件没有使用router-link组件,或者router-link组件没有正确设置active-class属性,那么keep-alive功能可能不会生效。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部