剃须刀视图中带有内联 vuejs 模板的 asp.net core <cache/> 标记无法正常工作答案

【问题标题】：asp.net core <cache/> tag with inline vuejs templates in razor views not working properly剃须刀视图中带有内联 vuejs 模板的 asp.net core <cache/> 标记无法正常工作
【发布时间】：2022-06-11 19:16:07
【问题描述】：

我正在尝试做的类似于here中的问题

我采用这种方法的主要原因是我的应用程序有一个插件系统，因此稍后会安装一些插件。每个插件都有自己的资源，包括 vuejs 逻辑。因此我不能像传统的 SPA 那样预编译 vuejs。

当前的方法效果很好，适合我的整体架构，并且也可以维护。但是，我遇到了一些我无法理解的东西。

也就是说，如果我想缓存一个使用标签助手的视图组件，在它被发送到浏览器之后，vuejs 似乎不会重新编译缓存内容中的任何与 vuejs 相关的视图。例如；

    <cache expires-after="@TimeSpan.FromDays(1)">
        @await Component.InvokeAsync("SiteHeader")
    </cache>

现在站点标题 ViewComponent 有 vuejs in razor 之类的；

<script at="Foot" type="text/x-template" id="vue-user-feedback">
     //all html vuejs stuff here
</script>

第一次加载并正常工作，但下次页面加载时浏览器中缺少这些组件。如果我删除 <cache/> 它工作正常。

是不是因为<cache/> 指示浏览器将数据保存在浏览器缓存或服务器中作为预渲染的html？即使是这样；一旦加载到浏览器中，vuejs 不应该能够找到它们并重新编译吗？

【问题讨论】：

缓存标签助手在服务器上执行并参与页面 HTML 的初始生成。它不会呈现给页面本身。浏览器对缓存标签助手一无所知。
@MikeBrind 是的，你是对的。然后问题仍然是为什么 VueJS 不编译加载到浏览器的缓存 html。这就是为什么我很困惑。如果我删除缓存标签助手，它工作正常。

标签： asp.net-core vuejs2 razor-pages asp.net-cache