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

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

1. 像上面一样添加'meta'标记，但还要向其中添加'icon'属性。

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

2. 转到主* .vue文件，各种组件将通过该文件进入。该文件是其中包含元素的文件。在其中，在文件的脚本部分中添加$ route watcher：

   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操作。