目前在很多网站我都有看到这个功能,具体效果就是网页的title会根据你访问的路由动态的切换。
我们以element-ui官网为例,效果如下:
当我们访问不同的路由,他也会动态的切换。
首先我们需要在注册路由时,就给他本身的属性上赋值,可以给name,也可以给meta
之后我们可以在app.vue入口文件中监视$route的变化
watch: {
'$route' (to) {
document.title = `${to.meta.title} | element`;//第一种方法
document.title = `${to.name} | element`;//第二种方法
}
}
ok,大功告成