使用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. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  2. 【ASP.NET-中级】SQLHelper数据访问公共类

    ASP.NET开发中的三层开发思想指的是UI层(界面显示层),BLL层(业务逻辑层),DAL层(数据访问层)三层,三层之间通过函数的调用来达到降低耦合,易于系统维护的目的,SQLHelper助手类的主 ...

  3. C++——多文件结构和编译预处理命令

    [toc] 一.多文件结构 1.一个工程可以划分为多个源文件 类声明文件(.h文件) 类实现文件(.cpp文件) 类的使用文件(main函数所在的.cpp文件) 2.利用工程来组合各个文件 //Poi ...

  4. 【博客美化】添加github图标

    <a href="https://github.com/cai3231" target="_blank"> <img style=" ...

  5. ng service(服务)

    ng service(服务) 创建服务命令:ng g service services/+服务名 使用服务的注意事项: 使用(services)服务需要在app.,module.ts(根模块)中引用并 ...

  6. linux分析工具之vmstat详解

    一.概述 vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.首先我们查看下帮助.如下图所 ...

  7. UVA - 11795 Mega Man's Mission

    Mega Man is off to save the world again. His objective is to kill the Robots created by Dr. Wily who ...

  8. UWP 使用新版画中画 FontIcon —— 如何使用自定义字体 —— 简单分析Windows Calculator源代码

    微软在新版UWP计算器中加入了一个“置顶”功能,它相当于我们之前看视频的“画中画”一样. 点击后窗体置顶,同时可以进行其他任务. 有的小伙伴说,不就是一个图标吗,去 Segoe MDL2 图标 把图标 ...

  9. Django高级实战 开发企业级问答网站 ✌✌

    Django高级实战 开发企业级问答网站 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 从实际需求分析开始,实现当今主流知识问答应用的功能,包括动态.文章.问 ...

  10. sublime text插件emmet自定义模板

    首先要找到 snippets.json这个文件,路径是preferences>browse packages,看看有没有emmet目录. 如果没有,可能是您没有安装emmet插件,或者您安装了但 ...