如何使用 Vue 路由器更改页面图标 + 标题

Question

我正在寻找一种使用 vue / vue-router 更改选项卡图标 + 标题的方法。

当我在主页时，我想要公司的徽标图标和标题，而在另一页上则需要不同的图标 + 标题。

我该怎么做？

我尝试将 meta: {title: 'company name'} 连接到路由器，但它不起作用。

Answer 1

除了添加“元”标签外，您还必须创建一个方法来接收此标签内的数据并应用所需的修改。

1. 添加'meta'标签，就像你刚刚在上面做的那样，但也添加'icon'属性给它。

   {
    path: "/login",
    name: "Login",
    component: LoginComponent,
    meta: {
      title: "Login",
      icon:"/lock.png" 
    }
   }
   

2. 转到您的主要 *.vue 文件，各种组件将被路由到该文件中。该文件是其中包含元素的文件。在其中，在文件的脚本部分添加一个 $route 观察者：

   watch: {
     $route(to) {
        document.title = `APPLICATION_NAME - ${to.meta.title}`;
        const link = document.querySelector("[rel='icon']")
        link.setAttribute('href',to.meta.icon)
     }
   }
   

将 APPLICATION_NAME 替换为您的应用名称，一切顺利。

代码是不言自明的。这只是基本的 DOM 操作。