Vue根据路由动态显示网页title

目前在很多网站我都有看到这个功能,具体效果就是网页的title会根据你访问的路由动态的切换。

我们以element-ui官网为例,效果如下:


当我们访问不同的路由,他也会动态的切换。

    首先我们需要在注册路由时,就给他本身的属性上赋值,可以给name,也可以给meta


    之后我们可以在app.vue入口文件中监视$route的变化

    watch: {

         '$route' (to) {

           document.title = `${to.meta.title} | element`;//第一种方法

           document.title = `${to.name} | element`;//第二种方法

          }

      }

ok,大功告成


    

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容