在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx";

随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖。

  1. <script>
  2. export default {
  3. data(){
  4. return{
  5. }
  6. },
  7. created(){
  8. document.title="首页"
  9. },
  10. }
  11. </script>

于是在github上找到一个好用的东西 vue-wechat-title

通过 npm install vue-wechat-title  安装

引入需要的vue-router与页面需要的组件之后

  1. const router = new VueRouter({
  2. mode: 'history',
  3. routes:[
  4. {
  5. name: 'index',
  6. path: '/',
  7. meta: {
  8. title: '首页'
  9. },
  10. component: index
  11. },
  12. {
  13. name: 'root',
  14. path: '/root',
  15. meta: {
  16. title: '肉特'
  17. },
  18. component: root
  19. }
  20. ]
  21. });
  22. Vue.use(require('vue-wechat-title')); //实例化参数

在组件中顶部添加一段 <div v-wechat-title="$route.meta.title"></div>

即可实现改变title效果。

Vue Spa切换页面时更改标题的更多相关文章

  1. Vue切换页面时中断axios请求

    一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...

  2. 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现

    Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...

  3. Flutter实现TabBarView切换页面时每个页面只initState一次

    在  TabBarView  组件中切换页面时,子页面每次均会重新  initState  一次,导致每次都切换页面均会重绘,如下图 如果需要只在第一次进页面  initState  一次,后面再进入 ...

  4. VUE如何实现切换页面时的过渡动画?

    最近再写页面的时候,感觉页面之间的切换有点生硬,所以查了一下文档看见了transition这个组建,很实用,故此在这里跟大家分享一下 --------------------------------- ...

  5. JQuery Mobile - 解决切换页面时,闪屏,白屏等问题

    在点击链接,切换页面时候,总是闪屏,感觉很别扭,看起来不舒服,怎么解决这个问题?方法很简单,就是在每个页面的meta标签内定义user-scalable的属性为 no! <meta name=& ...

  6. 解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 ...

  7. vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息

    可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent ...

  8. 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

    1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...

  9. vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...

随机推荐

  1. Java - 谨慎实现Comparable接口

    类实现了Comparable接口就表明类的实例本身具有内在的排序关系(natural ordering). 因此,该类可以与很多泛型算法和集合实现进行协作. 而我们之需要实现Comparable接口唯 ...

  2. 【7】.net WebAPI Owin OAuth 2.0 密码模式验证实例

    1.OAuth密码模式 2.在VS中创建WebAPI项目 在nuget中安装: Microsoft.AspNet.WebApi.Owin Microsoft.Owin.Host.SystemWeb 这 ...

  3. 怎么使用fiddler 测试post get 接口

    直接上图 测试 post

  4. 查看SQLServer数据库表占用大小

      查看数据库mdf 文件中 各个表数据占用大小.      create table #t(name varchar(255), rows bigint, reserved varchar(20), ...

  5. Spring入门(二)— IOC注解、Spring测试、AOP入门

    一.Spring整合Servlet背后的细节 1. 为什么要在web.xml中配置listener <listener> <listener-class>org.springf ...

  6. csharp: read excel using Aspose.Cells

    /// <summary> /// /// </summary> /// <param name="strFileName"></para ...

  7. bootstrap学习笔记细化(标题)

    bootstrap中的排版: 标题(h1~h6/.h1~.h6) h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px; 副标题(small) 小练习(标题大 ...

  8. JS上传图片转化成Base64编码demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Android GridView异步加载图片和加载大量图片时出现Out Of Memory问题

    我们在使用GridView或者ListView时,通常会遇到两个棘手的问题: 1.每个Item获取的数据所用的时间太长会导致程序长时间黑屏,更甚会导致程序ANR,也就是Application No R ...

  10. Azure Linux 虚机上配置 RAID 的常见问题及解决方案

    简介 独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),简称磁盘阵列.能增强数据集成度,增强容错功能,增加处理量或容量.详情参见这篇文章. 配置 ...