使用vue-wechat-title插件对页面标题进行设置

1.安装模块
    命令行窗口中运行npm install vue-wechat-title --save

PS.如果程序正在运行,ctrl+c先跳出运行,安装了上述模块再npm run dev一下

2.在main.js中引入

import VueWechatTitle from 'vue-wechat-title';
Vue.use(VueWechatTitle)

3.路由中加title
    在router文件夹下的index.js中,在每个页面的meta里面加入title

{
path: '/connect',
name: '个人中心',
component: resolve => { require(['@/components/connect/connect'], resolve) },
meta: { title: "个人中心" }
}

4. App.vue中修改router-view如下

<router-view v-wechat-title="$route.meta.title"/>

5.重新加载页面就可以看到你设置的标题了

vue设置页面标题的更多相关文章

  1. vue-router设置页面标题

    通过vue-router设置页面标题 const router = new Router({ routes: [ { path: '/', name: 'EntryConfirmation', met ...

  2. 小程序之--动态设置页面标题 wx.setNavigationBarTitle

    参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的 ...

  3. vue 设置动态标题

    在 router/index.js 文件中设置 meta:{title:'标题'} 和 router.beforeEach,即可实现功能, 代码如下: import { createRouter, c ...

  4. 单页应用动态设置页面title

    1.适用场景:所有通过router路由的单页应用. 2.示例代码:本文以vue-router为例. 在router.js中: let router = new Router({ routes: [ { ...

  5. vue设置全局query参数

    router.beforeEach((to, from, next) => { // 设置全局店铺ID shopid const shopid = from.query.shopid // 如果 ...

  6. React项目动态设置title标题

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢?1.在定义路由时增 ...

  7. 小程序动态修改页面标题setNavigationBarTitle

    可以使用setNavigationBarTitle方法动态设置页面标题 wx.setNavigationBarTitle({ title: options.name, })

  8. 046——VUE中组件之使用动态组件灵活设置页面布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 微信小程序 --- 设置页面的标题

    第一种方式:修改 page.json文件 { "navigationBarTitleText": "豆瓣 - 电影" } 第二种方式:使用 JS 修改: wx. ...

随机推荐

  1. layload.js的使用

    网上有人反映说lazyload只是效果好看并没有实现真正的懒加载,在后台仍然是把页面上的所有图片下了一遍,只不过是先把图片隐藏并在窗口向下滚动时再逐一显示出来罢了.lazyloag3经测试这个问题已经 ...

  2. 系统定时任务crond

    1.Linux的定时任务:crond(crontab)服务 (1)crond 是什么? crond 是 linux 系统中用来定期执行命令或者指定程序任务的一种服务和软件:crond 服务默认情况(每 ...

  3. $(document).height 与$(window).height的区别

    $(document).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)$(document).scrollLeft() 这是获取水平滚动条的距离 要获取 ...

  4. Knative 暂时不会捐给任何基金会 | 云原生生态周报 Vol. 22

    作者 | 新胜.心贵.进超.元毅.衷源 业界要闻 谷歌:不会向任何基金会捐赠 Knative 自 Knative 项目开始以来,一直存在关于是否将 Knative 捐赠给基金会(例如 CNCF)的疑问 ...

  5. 1. SOFAJRaft源码分析— SOFAJRaft启动时做了什么?

    我们这次依然用上次的例子CounterServer来进行讲解: 我这里就不贴整个代码了 public static void main(final String[] args) throws IOEx ...

  6. .netcore 开发的 iNeuOS 物联网平台部署在 Ubuntu 操作系统,无缝跨平台。助力《2019 中国.NET 开发者峰会》。

    2019 中国.NET 开发者峰会正式启动 目       录 1.      概述... 2 2.      准备运行程序包... 2 3.      安装.netcore. 3 4.      安 ...

  7. Java后端工程师必备书单(从Java基础到分布式)

    Java开发工程师一般负责后端开发,当然也有专门做Java Web的工程师,但是随着前后端的分离,越来越多的Java工程师需要往大后端方向发展. 今天我们就来介绍一下Java后端开发者的书单. 首先要 ...

  8. 某CTF平台一道PHP代码审计

    这道题不是说太难,但是思路一定要灵活,灵活的利用源码中给的东西.先看一下源码. 首先要理解大意. 这段源码的大致的意思就是,先将flag的值读取放在$flag里面. 后面再接受你输入的值进行判断(黑名 ...

  9. kafka-0.10.2.1:Producer生产时无法自动创建Topic

    集群环境: CenterOS 1台 Kafka:0.10.2.1版本. 今天在测试环境下,我们的Kafka集群工作不正常,具体现象为,使用confulentkafka向kafka集群生产消息失败,且并 ...

  10. .NET Core 3.0中IAsyncEnumerable<T>有什么大不了的?

    .NET Core 3.0和C# 8.0最激动人心的特性之一就是IAsyncEnumerable<T>(也就是async流).但它有什么特别之处呢?我们现在可以用它做哪些以前不可能做到的事 ...