vue组件html elemnet呈现
我正在开发一个多页web应用程序(MPA)，使用LaravelVersion5.6和vue.js 2.0版本。
我使用多个vue组件，例如Demo.vue，并在PHP刀片文件中使用该组件。
问题是，当我尝试查看页面视图源(ctrl+u)时，它只显示PHP刀片文件中使用的html标记，但没有显示vue组件的HTML元素。
我希望Vue组件HTML元素也显示在页面视图源代码中，因为我的google爬行主要依赖于使用的vue组件。你能帮我解决这个问题吗？
同时附加页面源代码的截图和相同的示例代码片段。
- Demo.vue文件代码 示例组件我是一个示例组件。导出默认{console.log(){组件挂载.‘}}
- App.js window.Vue = require('vue')；window.axios = require('axios')；从‘Vue-js- VModal’导入VModal；Vue.use(VModal)；Vue.component(‘Vue.component’)，require(‘./components/Demo.vue’)；const app =新Vue({ el：'#app'，})；
- Layout.blade.php
也就是说，我们希望在视图源代码中呈现HTML代码。
我们甚至试着检查有关SSR的各种文章，但是这些示例都是使用静态内容显示的，而我们的数据来自数据库，是一个多页面的应用程序。
我们尝试了以下方法:-
https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/
上面的文章只显示静态数据..。
谢了，查理兹
回答 1
Stack Overflow用户
发布于 2018-12-03 15:50:15
这是您通过选择使用像Vue这样的反应性框架而面临的一个常见问题。问题是HTML本身不是在初始页面加载时呈现的，而是在事实之后由javascript填充，然后呈现给用户。您无法解决Vue组件的这个特殊问题，而且由于您使用的是动态数据，所以不能缓存HTML本身。
但是，我在过去成功使用过的一种有趣的方法是在页面加载时实际呈现“占位符”HTML，该HTML简单地省略了动态数据，然后使用v-show或v-if方法在数据加载完成后切换占位符HTML和动态HTML数据。如果您不使用转换，这可能会导致一些闪烁，但如果您真的想让google爬行那个HTML，而且您真的需要使用Vue，那么这是一个很好的解决方案。一个简化的例子如下所示：
<div v-show="loaded">
<example-component></example-component>
</div>
<div id="placeholder">
<div>
Hello, Google Bot!
</div>
</div>然后，在安装组件时，将“加载”变量的值更改为true，并使用发射器将其传递给父变量，同时使用javascript隐藏原始div，从而用Vue生成的HTML替换占位符HTML。Google将能够看到占位符中的任何内容，并且在加载之后仍然可以获得动态内容。这不是最漂亮的答案，需要使用一些非常无反应的实践来实现结果，但请注意，这只是尝试给您一个可能适用于您的特定用例的答案。
在实现此方法时，您可能需要考虑使用Vue组件本身中的includes，它实际上调用占位符HTML，这样您就不会重复，并且只在一个源位置更新静态HTML。如果你需要的话，我可以给你更多的帮助。
https://stackoverflow.com/questions/53595406
复制相似问题
腾讯云开发者
