共用组件中某个数据随着路由改变而改变?

Question

比如，我的Head组件是共用的
APP.js

<template>
 <heads></heads> <router-view transition="fade" transition-mode="out-in"></router-view>
</template>

其中Heads.js中title是需要根据路由来变化的，相当于html中的<title>标签

<template>
 <x-header :left-options="{backText:'',showBack:true}">{{title}}</x-header>
</template>

我的思路是这样的:
用计算属性根据路由路径来匹配，然后返回。

computed: { 
    title: function () { 
        switch (this.$route.path) {
         case '/': 
         return '首页' 
         case '/a': 
         return '页面a' 
         case '/b': 
         return '页面b' 
         case '/c': 
         return '页面c' } 
     }
 }

这样做的话如果路由越来越多case也会越来越多，不好维护。
麻烦大神能指点指点。

Answer 1

参考https://segmentfault.com/q/10...