Vue3路由导航守卫：如何在网页中设置附加SEO元素

发布时间：2023-05-17

一、前言

当开发者在开发网站时，希望用户能够更好地找到自己制作的网站，并且在搜索引擎中排名更高。在这种情况下，搜索引擎优化（SEO）就显得至关重要。SEO可以通过设置一些比如 <meta> 标签、<title> 标签、<link> 标签等来完成。

二、Vue3路由概述

Vue3是Vue.js的最新版本，它是一种渐进式JavaScript框架，拥有多个功能，包括组件化、状态管理、路由等。Vue Router是Vue.js中的官方路由库，可以帮助我们在单页面应用程序中实现基于组件的导航。 路由可以让用户在浏览器中通过点击链接、输入URL等方式进行导航。路由跳转时可以通过导航守卫来实现一些逻辑控制。路由导航守卫是Vue Router提供的一个功能，可以在路由切换时进行控制。本文将主要介绍如何在Vue3中使用路由导航守卫的功能来设置附加SEO元素。

三、设置网页标题 <title> 标签

标题（title）标签是网页优化的基础，可以告诉搜索引擎要显示的信息和网页的主要内容。在Vue3中，需要使用路由导航守卫中的 beforeEach 方法。这个方法会在每个路由切换之前调用。

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

上面的代码中，我们在 beforeEach 方法中设置了 document.title 值为 to.meta.title。这里的 to 表示要跳转的路由信息，通过它能够访问到 meta 中的 title 属性。接下来在每个路由配置的 meta 中加入 title 字段即可。

const router = createRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        title: '网站首页'
      }
    },
    ...
  ]
})

四、设置 meta 标签

在Vue3中，设置 meta 标签也可以通过使用路由导航守卫的方法 beforeEach 完成。可以将 meta 信息存储在路由配置中，然后在跳转时将其添加到网页头部中。

router.beforeEach((to, from, next) => {
  const head = document.getElementsByTagName('head')[0]
  const meta = document.createElement('meta')
  meta.content = to.meta.description || '这是一个Vue3应用程序'
  meta.name = 'description'
  head.appendChild(meta)
  next()
})

上述代码中，在 beforeEach 方法中，我们首先获取了 head 元素，然后创建了一个 meta 元素，并且将 to.meta.description 属性的值设置为了 content。最后，将新的 meta 元素添加到 head 元素中。如下是路由配置中 meta 标签的设置：

const router = createRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        title: '网站首页',
        description: '这是一个Vue3应用程序'
      }
    },
    ...
  ]
})

Link 标签是一种较为复杂的 meta 标签，主要用于网站图标、样式表等。在Vue3中，设置 Link 标签也可以通过使用路由导航守卫的方法 beforeEach 完成。

router.beforeEach((to, from, next) => {
  const head = document.getElementsByTagName('head')[0]
  const favicon = document.querySelector('link[rel="icon"]')
  favicon.href = to.meta.icon || '/favicon.ico'
  if (!favicon) {
    const link = document.createElement('link')
    link.href = to.meta.icon || '/favicon.ico'
    link.rel = 'icon'
    head.appendChild(link)
  }
  next()
})

在上述代码中，我们首先获取了 head 元素和当前网站的 favicon。如果 favicon 不存在，我们就创建了一个 link 元素，并且将 to.meta.icon 属性的值设置为 href，并且将 rel 属性设置为 icon。接着我们将新 link 元素添加到 head 元素中。如下是路由配置中 link 标签的设置：

const router = createRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        title: '网站首页',
        description: '这是一个Vue3应用程序',
        icon: '/favicon.ico'
      }
    },
    ...
  ]
})

六、小结

通过本文的介绍，我们可以了解如何在Vue3中使用路由导航守卫的功能来设置附加SEO元素。包括设置 <title> 标签、<meta> 标签、<link> 标签等。这些元素都可以对网站的优化起到重要的作用。

推荐文章