vue单页面应用中动态修改title

vue-weachat-title

======================================

适用于

1.微信
2.webview
3.各大浏览器
－－－－－－－－

demo: http://www.yahoo.com/

首先执行命令

vue2.x用法
npm install vue-wechat-title;

之后在main.js全局入口处，引入wechat-title

Vue.use(require('vue-wechat-title'));

然后在router路由中

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'index',
    },
    {
      path: '/index',
      name: 'Index',
      component: Index,
      meta: { title: '首页' },
    },
    {
      path: '/project',
      name: 'Project',
      component: Project,
      meta: { title: '活动项目' },
    },
    {
      path: '/service',
      name: 'Service',
      component: Service,
      meta: { title: '服务' },
    },
    {
      path: '/interspace',
      name: 'Interspace',
      component: Interspace,
      meta: { title: '空间' },
    },
    {
      path: '/discover',
      name: 'Discover',
      component: Discover,
      meta: { title: '发现' },
    },
    {
      path: '/my',
      name: 'My',
      component: My,
      meta: { title: '我的' },
    },
  ]}
)

之后在各个组建中随便一个标签中都可写入

<div v-wechat-title="$route.meta.title"></div>
or/
<router-view v-wechat-title="$route.meta.title"></router-view>

想要动态的改变title值，可以这样写

<div v-wechat-title="$route.meta.title={data.title}"></div>