Vue Spa切换页面时更改标题
在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx";
随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖。
- <script>
- export default {
- data(){
- return{
- }
- },
- created(){
- document.title="首页"
- },
- }
- </script>
于是在github上找到一个好用的东西 vue-wechat-title
通过 npm install vue-wechat-title 安装
引入需要的vue-router与页面需要的组件之后
- const router = new VueRouter({
- mode: 'history',
- routes:[
- {
- name: 'index',
- path: '/',
- meta: {
- title: '首页'
- },
- component: index
- },
- {
- name: 'root',
- path: '/root',
- meta: {
- title: '肉特'
- },
- component: root
- }
- ]
- });
- Vue.use(require('vue-wechat-title')); //实例化参数
在组件中顶部添加一段 <div v-wechat-title="$route.meta.title"></div>
即可实现改变title效果。
Vue Spa切换页面时更改标题的更多相关文章
- Vue切换页面时中断axios请求
一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...
- 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现
Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...
- Flutter实现TabBarView切换页面时每个页面只initState一次
在 TabBarView 组件中切换页面时,子页面每次均会重新 initState 一次,导致每次都切换页面均会重绘,如下图 如果需要只在第一次进页面 initState 一次,后面再进入 ...
- VUE如何实现切换页面时的过渡动画?
最近再写页面的时候,感觉页面之间的切换有点生硬,所以查了一下文档看见了transition这个组建,很实用,故此在这里跟大家分享一下 --------------------------------- ...
- JQuery Mobile - 解决切换页面时,闪屏,白屏等问题
在点击链接,切换页面时候,总是闪屏,感觉很别扭,看起来不舒服,怎么解决这个问题?方法很简单,就是在每个页面的meta标签内定义user-scalable的属性为 no! <meta name=& ...
- 解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 ...
- vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息
可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent ...
- 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法
1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...
随机推荐
- Java - 谨慎实现Comparable接口
类实现了Comparable接口就表明类的实例本身具有内在的排序关系(natural ordering). 因此,该类可以与很多泛型算法和集合实现进行协作. 而我们之需要实现Comparable接口唯 ...
- 【7】.net WebAPI Owin OAuth 2.0 密码模式验证实例
1.OAuth密码模式 2.在VS中创建WebAPI项目 在nuget中安装: Microsoft.AspNet.WebApi.Owin Microsoft.Owin.Host.SystemWeb 这 ...
- 怎么使用fiddler 测试post get 接口
直接上图 测试 post
- 查看SQLServer数据库表占用大小
查看数据库mdf 文件中 各个表数据占用大小. create table #t(name varchar(255), rows bigint, reserved varchar(20), ...
- Spring入门(二)— IOC注解、Spring测试、AOP入门
一.Spring整合Servlet背后的细节 1. 为什么要在web.xml中配置listener <listener> <listener-class>org.springf ...
- csharp: read excel using Aspose.Cells
/// <summary> /// /// </summary> /// <param name="strFileName"></para ...
- bootstrap学习笔记细化(标题)
bootstrap中的排版: 标题(h1~h6/.h1~.h6) h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px; 副标题(small) 小练习(标题大 ...
- JS上传图片转化成Base64编码demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Android GridView异步加载图片和加载大量图片时出现Out Of Memory问题
我们在使用GridView或者ListView时,通常会遇到两个棘手的问题: 1.每个Item获取的数据所用的时间太长会导致程序长时间黑屏,更甚会导致程序ANR,也就是Application No R ...
- Azure Linux 虚机上配置 RAID 的常见问题及解决方案
简介 独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),简称磁盘阵列.能增强数据集成度,增强容错功能,增加处理量或容量.详情参见这篇文章. 配置 ...