使用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. mapper操作数据的同时返回操作后的值

    <insert id="insertSelective" parameterType="com.test.entity.business" keyProp ...

  2. IPv6系列-彻底弄明白有状态与无状态配置IPv6地址

    深入研究自动分配IPv6地址的Stateless(无状态)与Stateful(有状态)方式 小慢哥的原创文章,欢迎转载 目录 ▪ 一. Link-Local Address的生成方式 ▪ 二. Glo ...

  3. Thinkphp5.0终章

    thinkphp5.0最终总结 前期刚开始我是跟着b站上的千峰教育的视频走的,一路上做笔记进行深化与实际操作,中间因为不会开报错,并且视频里面也没有讲到怎么弄报错,因为是新手,那种出错了却不知道错在哪 ...

  4. 一文掌握在Word中快速编写公式

    在使用Word编写文章时,总会遇到书写数学公式的情况.使用Word的公式输入工具需要频繁地使用鼠标,因而编写公式会显得繁琐麻烦,那么有什么办法可以优雅地在Word中书写公式呢?其实Word早在Word ...

  5. Python调用GithubAPI并进行初步的数据分析

    找到一个Github 上的公开api url = 'https://api.github.com/search/repositories?q=language:python&sort=star ...

  6. 生产环境中的kubernetes 优先级与抢占

    kubernetes 中的抢占功能是调度器比较重要的feature,但是真正使用起来还是比较危险,否则很容易把低优先级的pod给无辜kill.为了提高GPU集群的资源利用率,决定勇于尝试一番该feat ...

  7. C语言打印当前所在函数名、文件名、行号

    printf("[%s %s] %s: %s: %d\n", \ __DATE__, __TIME__, __FILE__, __func__, __LINE__); 内核驱动中: ...

  8. [NOIp2011] luogu P1314 聪明的质监员

    题目描述 点进去看吧,说的不能再清楚了. Solution 看到数据规模不难想到二分 WWW,然后用个前缀和优化一下即可.注意上下界. #include<cstdio> #include& ...

  9. luogu P3936 Coloring

    [返回模拟退火略解] 题目描述 在一个 n×mn\times mn×m 的矩阵中,每个点都染了一种颜色(只能是 [1,c][1,c][1,c] 中的一种),求一种方案,使得相邻异色点对数最小. Sol ...

  10. luogu P4035 [JSOI2008]球形空间产生器

    [返回模拟退火略解] 题目描述 今有 n+1n+1n+1 个 nnn 维的点,它们都在一个球上.求它们所在球的球心. Solution 4035\text{Solution 4035}Solution ...