vue单页面标题设置 title

2019-8-9    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

推荐使用 vue-wechat-title

vue-wechat-title作用
Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

已测试APP 
微信 
QQ 
支付宝 
淘宝

安装
npm install vue-wechat-title --save
1
用法
1，在 main.js 中引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
1
2
2，在路由文件 index.js 中给每个路由添加 title
// 挂载路由
const router =  new Router({
   mode: 'history',
   routes:[
        {
          path: '/',
          name: 'Index',
          component: Index,
          meta: {
            title: '首页'   // 标题设置
          }
        },
        {
          path: '/lists',
          name: 'Lists',
          component: Lists,
          meta: {
            title: '列表'  // 标题设置
          }
        }
     ]
});

3，在 app.vue 中修改 router-view 组件
<router-view v-wechat-title='$route.meta.title'></router-view>
1
自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的

<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>
1
ok ！重启看看

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

分享本文至：
« 当我们在谈 SaaS 的时候，在谈什么？ 如何通过体验设计赋能产品增长—阅读产品案例分享 »

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档