当前位置:网站首页>document.title获取当前网页的标题

document.title获取当前网页的标题

2022-08-10 16:36:00 大象与小蚂蚁的生活

需求 : 在页面载入数据之后,根据返回的数据动态的修改页面title。

解决过程

  1. 使用js方法修改title document.title = ‘页面标题’;
  2. 出现问题:页面title并没有刷新,测试之后发现路由变化(后退、跳转等)之后才会刷新。

1.利用H5的history手动刷新路由,刷新title history.pushState(null, null, null);
2.出现问题:title是刷新了,但是浏览器历史栈会多一条记录,返回两下才能返回上一个路由。


  1. 对history后退,回到原始路由 history.go(-1);
  2. 出现问题:当前页面中动态更改title完美解决,但是页面中所有的title都改变了。

路由器拦截处理

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

  router.afterEach((to) => {
    
    if (to.meta?.label) {
    
      // 设置页面`title`
      document.title = `一立科技 - ${
      to.meta.label}`;
    }
  });
原网站

版权声明
本文为[大象与小蚂蚁的生活]所创,转载请带上原文链接,感谢
https://blog.csdn.net/seimeii/article/details/126265709