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效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍iOS 页面滑动与标题切换颜色渐变的联动效果实例，包括了iOS 页面滑动与标题切换颜色渐变的联动效果实例的使用技巧和注意事项，需要的朋友参考一下 话不多说，直接上图，要实现类似如下效果。 这个效果非常常见，这里着重讲讲核心代码 封装顶部的PageTitleView 封装构造函数 封装构造函数，让别人在创建对象时，就传入其实需要显示的内容 frame：创建对象时确定了 frame就可以
-
本文向大家介绍TabLayout+ViewPager实现切页的示例代码，包括了TabLayout+ViewPager实现切页的示例代码的使用技巧和注意事项，需要的朋友参考一下 安卓使用TabLayout+ViewPager+Fragment 实现页面切换，可实现左右滑动切换视图界面和点击切换 可自定义菜单栏是在顶部还是在底部 一、实现效果： 二、实现过程： 2.1 一些重要的设置 添加必须依赖：
-
本文向大家介绍Android编程之页面切换测试实例，包括了Android编程之页面切换测试实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android编程之页面切换测试。分享给大家供大家参考。具体分析如下： 一、软件平台: win7 + eclipse + sdk 二、设计思路: 两个页面:mian和ok,每个页面上有一个按键,点击则可以互相切换 三、源代码: main.xml源代码
-
移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示Loading状态缓解一下用户等待情绪就十分重要。 如果你使用vue-router和vuex，那么可以很容易实现。 首先，注册一个module来保存状态 const store = new Vuex.Store({}) // 这里你可能已经有其他 module store.registerModule('vux'
-
网上找了一圈，好像都不太行，我这边也没有网上截图的 是否缓存按钮切换 每次点击标签页切换，都会重载数据，之前页面的筛选条件也会被重置 已解决 谢谢
-
本文向大家介绍jquery+css实现Tab栏切换的代码实例，包括了jquery+css实现Tab栏切换的代码实例的使用技巧和注意事项，需要的朋友参考一下 前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。 最终要实现的效果图如下： （1）点击tab栏显示对应的内容，并且tab栏样式变化。实现