SPA应用动态修改title(解决document.title修改后刷新路由才生效问题)

需求

在页面载入数据之后，根据返回的数据动态的修改页面title。

解决过程

使用js方法修改title

document.title = '页面标题';

 出现问题：页面title并没有刷新，测试之后发现路由变化(后退、跳转等)之后才会刷新。

利用H5的history手动刷新路由，刷新title

history.pushState(null, null, null);

出现问题：title是刷新了，但是浏览器历史栈会多一条记录，返回两下才能返回上一个路由。

对history后退，回到原始路由

history.go(-1);

出现问题：当前页面中动态更改title完美解决，但是页面中所有的title都改变了。

路由器拦截处理

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

到此问题成功解决~