• 当前标签:标题

程序开发 Vue下动态修改title标题

安装 vue-wechat-title 插件, npm install vue-wechat-title --save 在main.js 中, Vue.use(require('vue-wechat-title')) 路由定义(只截取一部分): // ... const routes = [   {     name: 'Home',     path: '/home',     meta: {       title: '首页'     },     component: require('../views/Home.vue')   },   {     name: 'Order',     path: '/order',     meta: {       title: '订单'     },     component: require('../views/Order.vue')   },   {     name: 'UCenter',     path: '/ucenter',     meta: {       title: '用户中心'     },     component: require('../views/UCenter.vue')   } ] // ... App.vue 建议全局只使用一次该指令 标题可用vuex或者router中定义 不要多处使用!! <!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 --> <div v-wechat-title="$route.meta.title"></div> <!--or--> <router-view v-wechat-title="$route.meta.title"></router-view> 自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的 <div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div> 动态修改在组件中,设置: this.$route.meta.title = '标题名称' 项目:https://github.com/deboyblog/vue-wechat-title

2018-04-16 14:24:45 104 0 0
阅读详情
  • 1
前往