vue-
meta可用于管理 Vue 应用的元信息，如标题、元标签等。其在不同版本 Vue 项目中的
使用方法如下：
#### Vue2 项目
1. **安装**：通过 npm 或 yarn 安装 vue-
meta，例如：
```bash
npm install vue-
meta
```
2. **在 main.js 中注册**：
```javascript
import Vue from 'vue';
import
Meta from 'vue-
meta';
Vue.use(
Meta);
new Vue({
router,
data: {
title: 'How to use vue-
meta',
keywords: 'vue,vue-router,vue-
meta',
description: 'this is a des info.'
},
// 定义
metaInfo
metaInfo() {
return {
title: this.title,
meta: [
{ name: 'keywords', content: this.keywords },
{ name: 'description', content: this.description }
]
};
},
render: h => h(App)
}).$mount('#app');
```
3. **组件中
使用**：
```vue
export default {
name: "about",
metaInfo() {
return {
title: this.title,
meta: [
{ name: "keywords", content: '213213' },
{ name: "description", content: '213213' }
]
};
}
};
```
4. **路由配置中
使用**：
```javascript
const routes = [
{
path: "/",
name: "home",
component: Home
},
{
path: "/home",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
component: () => import(/* webpackChunkName: "about" */ "../views/About.vue"),
meta: {
metaInfo: {
title: "腾讯首页",
keywords: "资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent",
description: "腾讯网从2003年创立至今，已经成为集新闻信息……"
}
}
}
];
```
#### Vue3 项目
Vue3 中
使用 vue-
meta 需
使用兼容 Vue3 的版本，如 @vueuse/head。
1. **安装**：
```bash
npm install @vueuse/head
```
2. **在 main.js 中注册**：
```javascript
import { createApp } from 'vue';
import { createHead } from '@vueuse/head';
import App from './App.vue';
const head = createHead();
const app = createApp(App);
app.use(head);
app.mount('#app');
```
3. **组件中
使用**：
```vue
<template>
<div>
<!-- 组件内容 -->
</div>
</template>
<script setup>
import { useHead } from '@vueuse/head';
useHead({
title: 'Page Title',
meta: [
{ name: 'keywords', content: 'vue3,
meta' },
{ name: 'description', content: 'This is a Vue 3 page.' }
]
});
</script>
```
博客介绍了使用代码“echo \<meta http-equiv=\\\refresh\\\ content=\\\0;url=index.php?/\\\>\”来实现PHP页面跳转，且跳转时不显示链接。
扫一扫
1457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
