vue-router

Question

我想在header标签里面动态的去改变名称，点击到login页面时显示login点击到search页面是header显示searrch。请问怎么写
var App = Vue.extend({

route:{
    data:function (transition) {
        this.$route.title = 'login'
    }
}

})

Answer 1

1. this.$root.title = 'login'

2. $dispatch

3. vuex

Answer 2

我现在项目也有这个需求，我的方案是这样的：
main.js定义路由：

router.map({
        '/': {
            name: 'home',
            title: "红包日历",
            component: function(resolve){
                require(['./components/Home.vue'], resolve);
            }
        },
        '/taskList/:tasktype': {
            name: "list",
            title: ["联盟任务", "限时任务", "深度任务"],
            component: function(resolve){
                require(['./components/TaskList.vue'], resolve);
            }
        }
        ...
})

我的x-header组件在App.vue下，就是在根组件下，通过App的data来控制x-header的title属性。App.vue和x-header组件的关系是父子关系。

其他组件：Home.vue、Task.vue都在App.vue的router-view挂载。

所以，App.vue跟Home.vue的关系是父子关系，可以在Home.vue中用this.$root或者this.$parent来指向App.vue。

在对应组件里面，使用route data hook，这里我用Home.vue来举例子

module.exports = {
    name: "home",
    route: {
        data: function (transition) {
            this.$root.xHeader.title = this.$route.title;
            transition.next()
        },
        waitForData: true
    }
}