vue-meta不会在页面刷新或动态组件的外部链接单击时显示标题、内容或架构
vue-meta不会在页面刷新或动态组件的外部链接单击时显示标题、内容或架构
提问于 2021-07-07 23:45:22
当我通过导航栏导航到动态组件时，vue-meta标题、内容和模式都正确显示，但是当我刷新页面或单击外部链接时，我得到的值是undefined。
我已经在json文件中存储了标题、内容和模式。
metaInfo() {
return {
title: `${this.seoTitle}`,
meta: [
{name: "robots", content: "index,follow"},
{
name: 'description',
content: `${this.seoContent}`
}
],
link: [
{rel: 'favicon', href: 'logo.ico'}
],
script: [{
type: 'application/ld+json',
json: this.markups
}]
}
},data() {
return {
seoTitle: this.$route.params.title,
seoContent: this.$route.params.content,
markups:this.$route.params.markup,
}
} <div class="landing-group-tours box" v-for="tour in boatTours" :key="tour.id">
<router-link
:to="{name: 'details', params:{id: tour.id, title: tour.seoTitle, content: tour.seoContent, markup:tour.markup}}">
</div>
<script>
import tours from '@/data/privateToursData.json'
export default{
data(){
return{
boatTours: tours
{
}
}
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-12 22:16:53
您应该将路由器参数存储在路由器本身或URL中，而不是链路中。您所做的是在单击链接时在内部传递对象，但正如您所注意到的，当您单击浏览器刷新按钮时，这些参数就会消失。
发生的事情是，Vue将加载应用程序和路由器，识别负责渲染路由的组件，并将检测到的参数从路由器传递到组件。因此会丢失你之前在链接中的任何额外数据。
根据应用程序逻辑，尝试只在路由器中保留动态参数，并将其余参数加载到组件中。也就是说，假设你的路线看起来像/details/:id，你应该在你的details组件中初始化SEO参数。
通常，这些数据来自后端，为了更快地访问，我会将数组转换为文字对象，并通过键访问记录。例如，将数组从：
[
{ "id": 1008; "title": "title1", "content": "....", ... },
{ "id": 1009, "title": "..."... }
]至
{
"1008": { title: "title1", content: "....", ... },
"1009": { .... }
}然后将其存储在VueX (https://vuex.vuejs.org/guide/getters.html)中
getters: {
// ...
getBoatTour: (state) => (id) => {
return state.boatTours[id] || { title: 'Not found', content: '......' }
}
} data() {
const SEOdata = store.getters.getBoatTour(this.$route.params.id);
return {
seoTitle: SEOdata.title,
seoContent: SEOdata.content,
markups: SEOdata.markup,
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68289139
复制相关文章
相似问题
腾讯云开发者
