VUE3项目能通路由给每个页面设置不同的 <meta name=“keywords” content=“”> <meta name=“description” content=“”>
时间: 2024-10-20 16:19:37 浏览: 2
在Vue3项目中,你可以利用组件的生命周期钩子或者Vuex状态管理来动态地设置每个页面的`<meta>`标签内容。当你通过路由导航到特定页面时,可以在对应的组件的created、mounted等生命周期阶段,或者在Vuex store中获取到该页面的关键字和描述信息,然后将其动态绑定到`<meta>`标签的属性上。
例如,在一个单文件组件中:
```javascript
export default {
created() {
const keywords = this.$store.state.pageKeywords[this.$route.name]; // 假设你在Vuex中存储了关键词数据
const description = this.$store.state.pageDescriptions[this.$route.name];
this.metaInfo = {
keywords,
description
};
},
template: `
<div>
<head>
<meta :name="metaInfo.keywords" :content="metaInfo.description" />
</head>
...
</div>
`,
};
```
这样,每次路由跳转,都会根据当前路由名称从store中获取并更新`<meta>`标签的内容。
相关问题
vue 添加<meta name="referrer" content="no-referrer" />
在 Vue 中添加 `<meta>` 标签可以通过在 `index.html` 文件中的 `<head>` 标签内添加来实现。具体来说,可以在 `index.html` 文件中的 `<head>` 标签内添加如下代码:
```html
<meta name="referrer" content="no-referrer" />
```
这样就可以在 Vue 应用中添加 `<meta>` 标签了。
vue3项目去除<meta name="referrer" content="no-referrer" />标签 png图片显示不了
`<meta name="referrer" content="no-referrer" />` 这个标签是用来控制 HTTP 请求的 referer 的,如果去掉这个标签,HTTP 请求的 referer 将会是当前页面的 URL。而对于图片的显示问题,这个标签并不会影响到图片的加载。可能是其他原因导致的问题。你可以检查一下以下几个方面:
1. 图片路径是否正确,是否存在该图片。
2. 图片的格式是否正确,是否支持浏览器。
3. 浏览器是否有安装相应的插件,例如 Adobe Flash Player。
你可以逐一排查这些原因,找到问题所在,进而解决。
阅读全文