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. ...
随机推荐
- cp -rf 操作时依然会提示覆盖
在linux上经常会使用cp -rf命令,该命令就是强制覆盖指定目录下的文件,但有时使用该命令依然会提示是否覆盖,cp命令的参数有如下一些: 参数说明: -a:此选项通常在复制目录时使用,它保留链接. ...
- github- 优秀资源总结
权限控制篇: SpringMVC-Mybatis-Shiro-redis-0.2-master:https://www.sojson.com/shiro / https://m.imooc.com/a ...
- 前端get和post那些事
首先,简单介绍下,get和post请求方法,综合以往笔记,现整理如下: 一.HTTP请求比较: 两种在客户端和服务器端进行请求-响应的方法是:GET和POST. GET - 从指定的资源请求数据 PO ...
- 二次编码 深浅拷贝 is和==
1.二次编码 ascii 不支持中文 gbk 支持中文 2个字节 包含ascii Unicode 万国码 python3 内存Unicode utf-8 可变的长度 英文 1字节 欧洲2个字节 亚洲3 ...
- kotlin -- 可见性修饰符
puiblic Kotlin的可见修饰符与Java类似,但是默认可见性不同,Java默认包私有,kotlin默认public ### internal internal 只在模块内部可见.一个模块就是 ...
- Spring Boot 2.X(六):Spring Boot 集成Redis
Redis 简介 什么是 Redis Redis 是目前使用的非常广泛的免费开源内存数据库,是一个高性能的 key-value 数据库. Redis 与其他 key-value 缓存(如 Memcac ...
- 理解Android中的注解与反射
反射 Java反射(Reflection)定义 Java反射机制是指在运行状态中 对于任意一个类,都能知道这个类的所有属性和方法:对于任何一个对象,都能够调用它的任何一个方法和属性: 这样动态获取新的 ...
- Android 世界中,谁喊醒了 Zygote ?
本文基于 Android 9.0 , 代码仓库地址 : android_9.0.0_r45 文中源码链接: SystemServer.java ActivityManagerService.java ...
- python编程基础之十二
列表:一种有序的集合,可以同时存储多个数据,列表元素可修改,属于可变序列 创建列表: 列表名 = [列表选项一,列表选项二,列表选项三,......] list1 = [] list2 = [10,2 ...
- 深入理解C#多线程 -戈多编程
引用(http://www.cnblogs.com/luxiaoxun/p/3280146.html) 一.使用线程的好处 1.可以使用线程将代码同其他代码隔离,提高应用程序的可靠性. 2.可以使 ...