悠悠楠杉
网站页面
在Vue3中，结合使用CompositionAPI和VueRouter，我们可以很方便地根据不同的页面路由动态更新页面的标题、关键词和描述。下面是一个示例，展示如何根据不同路由动态更新这些元数据：
06/14
在 Vue 3 中，结合使用 Composition API 和 Vue Router，我们可以很方便地根据不同的页面路由动态更新页面的标题、关键词和描述。下面是一个示例，展示如何根据不同路由动态更新这些元数据：
```javascript
import { useRouter, useRoute } from 'vue-router';
import { ref } from 'vue';
export default {
setup() {
const router = useRouter();
const route = useRoute();
const title = ref(''); // 用于存储页面标题的响应式引用
const keywords = ref(''); // 用于存储关键词的响应式引用
const description = ref(''); // 用于存储描述的响应式引用
const bodyContent = ref(''); // 用于存储正文内容的响应式引用
const updateMetaInfo = () => {
// 根据路由的不同，动态设置标题、关键词、描述和正文内容等元数据信息
if (route.path === '/home') {
title.value = 'Home Page';
keywords.value = 'home, welcome, index';
description.value = 'Welcome to the home page of our website.';
bodyContent.value = 'This is the home page content.';
} else if (route.path === '/about') {
title.value = 'About Us';
keywords.value = 'about, company, team';
description.value = 'Learn more about our company and team.';
bodyContent.value = 'This is the about page content.';
} else { // 默认值或通用信息设置
title.value = 'Default Page';
keywords.value = 'default, general';
description.value = 'A default page for unmatched routes.';
bodyContent.value = 'This is the default page content.';
}
};
// 在组件创建时更新元数据信息（例如，基于route的改变）
watch(route, updateMetaInfo); // 注意：在 Vue 3 中 watch 是 Composition API 中的函数之一。注意API版本和用法变化。使用前请检查最新的Vue文档。这里只做概念性示例。)
return { title, keywords, description, bodyContent }; // 将这些信息暴露给模板使用。} } } }; 上述代码展示了如何根据不同的路由路径动态更新页面的标题、关键词、描述和正文内容。在 setup() 方法中，我们定义了响应式引用以存储这些信息，并在组件创建时（即当路由发生变化时）通过 watch 函数来更新这些信息。这样，无论用户访问哪个页面，页面的元数据都将自动更新为该页面的正确信息。
