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

Question

我正在寻找一种方法来改变标签图标+标题与vue /vue-路由器。

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

我怎么能这么做？

我试图让meta：{title：'company name'}到路由器，但它不起作用。

Answer 1

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

1. 添加了'meta‘标签，就像上面所做的那样，但也添加了’图标‘属性。

{ path："/login"，name："Login"，component: LoginComponent，meta：{ title："Login"，图标：“/lock.png”}

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

观察：{ $route(to) { document.title = APPLICATION\_NAME - ${to.meta.title}；const link =document.querySelector(“rel=‘图标’”) link.setAttribute('href'，to.meta.icon) }

用你的应用程序名代替APPLICATION_NAME，你就可以走了。

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