vue设置页面标题

使用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设置页面标题的更多相关文章
- vue-router设置页面标题
通过vue-router设置页面标题 const router = new Router({ routes: [ { path: '/', name: 'EntryConfirmation', met ...
- 小程序之--动态设置页面标题 wx.setNavigationBarTitle
参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的 ...
- vue 设置动态标题
在 router/index.js 文件中设置 meta:{title:'标题'} 和 router.beforeEach,即可实现功能, 代码如下: import { createRouter, c ...
- 单页应用动态设置页面title
1.适用场景:所有通过router路由的单页应用. 2.示例代码:本文以vue-router为例. 在router.js中: let router = new Router({ routes: [ { ...
- vue设置全局query参数
router.beforeEach((to, from, next) => { // 设置全局店铺ID shopid const shopid = from.query.shopid // 如果 ...
- React项目动态设置title标题
在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢?1.在定义路由时增 ...
- 小程序动态修改页面标题setNavigationBarTitle
可以使用setNavigationBarTitle方法动态设置页面标题 wx.setNavigationBarTitle({ title: options.name, })
- 046——VUE中组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序 --- 设置页面的标题
第一种方式:修改 page.json文件 { "navigationBarTitleText": "豆瓣 - 电影" } 第二种方式:使用 JS 修改: wx. ...
随机推荐
- Angular7 HttpClient处理多个请求
1. MergeMap - 串联请求 后一个请求需要前一个请求的返回结果时,需要使用串联请求. 可以使用MergeMap实现, 优势是减少嵌套,优化代码: 代码如下: import {HttpClie ...
- python 对excel进行截图
工作中需要对excel的单元格区域进行截图,以前是调用vba进行(走了很多弯路,虽然能实现,但比较low),后来逐步发现python的win32com与vba师出同门,很多方法操作都是类似的. 可以对 ...
- JavaScript中闭包的使用和各种继承介绍
一.什么是闭包? (1)闭包的概念:a.闭包就是函数嵌套时,让局部变量变成自由变量的环境,是一种让局部变量进化的方式. b.定义在一个函数内部的函数. ...
- 死磕 java线程系列之线程池深入解析——体系结构
(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 简介 Java的线程池是块硬骨头,对线程池的源码做深入研究不仅能提高对Java整个并发编程的理解,也能提高自己 ...
- ef core实现软删除
很多web程序一般的偶不会设计真的物理删除了. 基本上都是在在数据库加一个标记,就得当作已经删除了.同时在查询的时候,过滤已经标记删除的数据 ef core实现软删除是非常简单的,直接在OnModel ...
- 信息传递 NOIP2015 day1 T2
题文: 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一轮 ...
- Integer类型与int的==比较
前言 Java中有两种类型 基本类型 基本数据类类型存的是数值本身 引用类型 引用类型变量在内存放的是数据的引用 基本类型通过==比较的是他们的值大小,而引用类型比较的是他们的引用地址 正文 在一些特 ...
- Fiddler的安装
相关下载软件(链接:https://pan.baidu.com/s/1HFdFNph6FGHOFtZq09ldpg 提取码:3u3l ) fiddler是基于.net环境的,所以需要先安装.net 安 ...
- UVA10228 A Star not a Tree?
[返回模拟退火略解] 题目描述 一平面上有 nnn 个点 {Ai}\{A_i\}{Ai},求一个点 XXX 使得σ=∑i=1ndis(Ai,X)\sigma=\sum_{i=1}^{n}{dis(A ...
- Ubuntu 安装mysql & 自定义数据存储目录
一.安装 apt-get install mysql-server 执行过程如下: root@duke:~# apt-get install mysql-server 正在读取软件包列表... 完成 ...