vue router2 如何动态修改网站标题title

Question

vue router2 如何动态修改网站标题title

Answer 1

document.title=......
我是这么做的.

还有这样的做的还包括meta[name='description']和第一张隐藏大logo..
为了默认分享。

Answer 2

router.beforeEach((to, from, next) => {
document.title = to.meta.title
next()
})

用路由钩子 title设在mata 字段里 轻松搞定。

Answer 3

定义路由的时候在meta里面加上组件的title,然后在路由的 beforeEach里面拿到to.meta.title，document.title=to.meat.title。一气呵成

Answer 4

vue-head 支持动态更改

Answer 5

通过判断路由的对象里面的变化呢？this.$route

Answer 6

一种方法：

• title的值从vuex的store里面读

• 进入每个页面设置vuex里面store的这个值为这个页面应有的值

Answer 7

注册一个全局指令来实现

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

<div v-title data-title="标题内容">
……组件内的内容
这里的div可以是你组件内的任何标签
</div>

https://segmentfault.com/a/11...

demo

https://jsfiddle.net/ycloud/5...

Answer 8

可以给index.html里边的title标签设置个id如<title id="titleId"></title>
然后在路由里边增加路由的钩子函数beforeEnter:

beforeEnter (to,from, next){
    document.getElementById('titleId').innerHTML = '要设置的标题'
    next()
}

Answer 9

可以检测路由的变化

Answer 10

用watch：

new Vue({
    el: '#app',
    i18n,
    data: {
        i18n: i18n
    },
    created: function(){
        document.title = this.$t('title')
    },
    watch: {
        'i18n.locale': function(){
            document.title = this.$t('title')
        }
    }
})