美文网首页
动态更换title

动态更换title

作者: Augenstern___ | 来源:发表于2018-11-20 19:51 被阅读0次

    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>

    相关文章

      网友评论

          本文标题:动态更换title

          本文链接:https://www.haomeiwen.com/subject/gbtfqqtx.html