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效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用node+vue.js实现SPA应用

    业务需求 最近公司要求开发web版的app,由于app是偏向内容方面,而且带了一个聊天模块,所以一般的多页开发不是很适合,而且主要是手机浏览,对加载速度或者用户体验来说都比较苛刻.调研了很多框架和模式,最后自己东拼西凑搞出来了这么一个玩意. 服务端 毫无疑问使用node,使用typescript可以有效的在编码同时查错,强类型语言写服务端毫无压力. #app.ts 只贴重要代码 var webpack = require('webpack') var webpackDevMiddleware =

  • vue中SPA单页面应用程序详解

    一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中. SPA的工作原理: eg:  http://127.0.0.1/index.html#/start ①根据地址栏中url解析完整的页面:index.html 加载index.html ②根据地址栏中url解析#后的路由地址: start 根据路由地址,去在当前应用的配置中 找该路由地址的配置

  • vue路由嵌套的SPA实现步骤

    本文为大家分享了路由嵌套的SPA实现的步骤: A(/a)组件需要嵌套B组件(/b)和C组件(/c) ①准备嵌套其它组价的父组件 指定一个容器 在A组件指定一个容器 <router-view></router-ivew> ②在A组件的路由配置对象中指定children属性 { path:'/a', component:A, children:[ {path:'/b',component:B}, {path:'/c',component:C}, ] } 补充: //数字如果超出记录的次

  • Vue.js实现一个SPA登录页面的过程【推荐】

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

  • Vue Spa切换页面时更改标题的实例代码

    在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx"; 随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖. <script> export default {

  • vue scroller返回页面记住滚动位置的实例代码

    1,设置keepAlive:是否缓存 router: { path: '/actlist', name: 'actlist', component: actlist, meta: { keepAlive: true } } 2,设置渲染页面 app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <rout

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

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • vue使用elementUI分页如何实现切换页面时返回页面顶部

    目录 使用elementUI分页实现切换页面时返回页面顶部 原理 实现 element-ui分页el-pagination的坑 1.所有的信息都必须的动态的 2.数据在data里面 3.这是重中之重,认真我的认证 使用elementUI分页实现切换页面时返回页面顶部 原理 给elementUI分页组件的切换页面时触发事件(在这里就是handleCurrentChange函数)添加一个跳转到页顶的方法即可. 实现 <!-- 分页组件 --> <el-pagination  @current

  • Vue SPA单页面的应用和对比

    Vue SPA单页面的应用和对比

    目录 一.什么是SPA 二.SPA和MPA的区别 三.单页应用的优缺点 四.怎么解决SPA首屏加载速度慢 1.什么是首屏加载 2.加载慢的原因 3.解决方案 一.什么是SPA SPA(single-page-application)就是单页应用. 它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(HTML.JavaScript和CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间

  • vue中for循环更改数据的实例代码(数据变化但页面数据未变）

    废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl

  • 使用vue-router切换页面时，获取上一页url以及当前页面url的方法

    使用vue-router切换页面时，获取上一页url以及当前页面url的方法

    今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我的实现代码总结如下: 项目使用的是vue-cli,直接贴代码 export default { mixins: [], vuex: { actions: {fetchCertificates}, }, data() { return {} }, route: { data() { this.$roo

  • 使用vue-router切换页面时实现设置过渡动画

    背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来. 实现难点 如何判断切换路由时是前进还是后退 每次切换时向左向右切换动画如何实现 解决方案 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import Vu

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • vue实现表格增删改查效果的实例代码

    vue实现表格增删改查效果的实例代码

    整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p

随机推荐