vue动态配置title、keywords、description、字体文件

字体文件动态配置

这里需要用到原生javascript中的document，querySelector，setAttribute。
需要在index.html中写入下列代码，也就是link，这里需要增加一个name值。name的值可以自己定义

可以在main.js中读取后台icon配置，也可以单独js配置。读取到后台的icon配置后，通过下面的代码写入配置,这样就不用每次修改icon配置都修改代码，只需要每次修改后，重新生成 font class 复制到后台配置写入数据库即可。

document.querySelector('link[name="iconfont"]').setAttribute('href', "//at.alicdn.com/t/font_731429_lei13dhc8d.css")

页面title动态配置

页面title的动态配置和iconfont的动态配置是有区别的，每个页面的title值都不一样，所以title的配置需要你熟悉router.beforeEach（）也就是路由拦截。在路由发生变化修改页面title。如下所示：

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    document.title = to.meta.title;
})

页面keywords、description动态配置

页面keywords、description动态配置与页面title和iconfont的动态配置相似
它可以在路由发生变化修改，也可以在单独页面配置，同时也可以在全局（main.js）配置
配置方式同iconfont。需要熟悉document，querySelector，setAttribute，同时也需要在index.html中写入meta{keywords、description}

1、router中配置

router.beforeEach((to, from, next) => {
    document.querySelector('meta[name="keywords"]').setAttribute('content', "关键词");
        document.querySelector('meta[name="description"]').setAttribute('content', "关键词");
})

2、全局配置和单页面配置,需在js代码块写入下列代码

document.querySelector('meta[name="keywords"]').setAttribute('content', "关键词");
document.querySelector('meta[name="description"]').setAttribute('content', "关键词");