使用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. Android开发——Kotlin开发APP使用笔记

    之前一直使用java来开发Android项目,学了新的kotlin语言,前来试一试,并说一下kotlin对Android的一些功能增强 创建项目 我使用的是Android Studio3.0+,所以默 ...

  2. phaser学习总结之Text对象详解

    前言 在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text ...

  3. 学习VBA

    学习VBA VBA 就是 (Visual basic for Application) 用的比较多的是在Excel中处理数据,可以方便快捷地使用编程方式来对数据进行操作. VBA 数据类型 Integ ...

  4. 让你如绅士般基于描述编写 Python 命令行工具的开源项目:docopt

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  5. ng 图片的引用

    对于图片的引用有两种类型 本地 业务逻辑中(使用url) 本地中图片需要存放在静态资源夹assets中下新建的文件夹images文件夹中 eg:images文件夹中有一张01.png 的图片 显示本地 ...

  6. QCustomPlot 基础

    QCutomPlot简介 官网网址及介绍 https://www.qcustomplot.com/ QCustomPlot is a Qt C++ widget for plotting and da ...

  7. Mapper

    public static T MapTo<T>(this object obj) { if (obj == null) return default(T); Mapper.CreateM ...

  8. .net cookie跨域请求指定请求域名

    HttpCookie cookie = new HttpCookie("OrderApiCookie"); //初使化并设置Cookie的名称 cookie.HttpOnly = ...

  9. 本人亲测-百度富文本编辑器(无bug版本)

    再此我想说明一点,好多教程都是转载别人的,而且也不注明从哪里转载的.每次搜点资料的时候总是跟网上刷小视频的感觉一样.有些人就直接把别人的东西粘贴过来了,一点改动都没有. 废话不多说,直接上教程. (百 ...

  10. 九、Executor框架

    Executor框架 ​ 我们知道线程池就是线程的集合,线程池集中管理线程,以实现线程的重用,降低资源消耗,提高响应速度等.线程用于执行异步任务,单个的线程既是工作单元也是执行机制,从JDK1.5开始 ...