You can use a navigation guard with the router definition:
|
1 2 3 4 5 6 7 8 9 10 |
import Vue from 'vue'; const DEFAULT_TITLE = 'Some Default Title'; router.afterEach((to, from) => { // Use next tick to handle router history correctly // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609 Vue.nextTick(() => { document.title = to.meta.title || DEFAULT_TITLE; }); }); |
Or you can use an immediate watcher on your root component:
|
1 2 3 4 5 6 7 8 9 10 11 |
export default { name: 'App', watch: { $route: { immediate: true, handler(to, from) { document.title = to.meta.title || 'Some Default Title' } } } } |
动态更改页面title：
|
1 2 3 4 5 6 7 8 |
watch: { title: { immediate: true, handler() { document.title = title } } } |
参考文章：
