最近正在开发一个微模块系统，产品想要根据子系统的不同，动态生成link标签与title中的内容，于是就做了一个简单的demo，希望分享出来给到后续有同样需求的伙伴，共勉。

1. 首先肯定是需要有一套**.svg**的图标来对应相应的系统，那就安排（我是放在public文件中，这样build的时候不会进行处理，方便随时根据ui设计进行替换）。

2. 由于title内容产品需要跟菜单一致，那就直接在路由定义好（此处命名跟svg一致，方便后面取值，见下图标注）：

3. 接下来就直接在app.vue中添加动态控制的代码了（重要）

4. 最终效果如下：
   
   重要代码分享：`import { ref, watch, computed } from “vue”;
   import { useRoute } from “vue-router”;

const route = useRoute();
const path = computed(() => route.path);
const link = document.createElement(“link”); //先获取link标签对象
link.rel = “icon”; //设置rel类型
watch(path, () => {
if (route.meta && route.meta.title) {
(document as any).title = route.meta.title;
link.href = ${route.meta.title}.svg;
} else {
(document as any).title = “demo”;
}
(document as any).head.appendChild(link); //输出修改
});`