动态更换title

2018-11-20  本文已影响0人  Augenstern___

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>
上一篇下一篇

猜你喜欢

热点阅读