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. ...
随机推荐
- Jquery toastr提示框
toastr是一个基于JQuery的消息提示插件; 1. 下载toastr和jquery https://jquery.com/download/ https://codeseven.github.i ...
- 瀑布流实例及懒加载(echo.js)
瀑布流布局: 图片等宽,不定高,按最低高度来顺序排列:实现方法:获取每次获取四行中最低高度对应的一行,将下一张加载的图片放在该位置,每次加载前都获取最低高度: ①请求图片的接口 地址此php文件 ...
- ng-cli新建项目
tip:所有的命令是红色标签 , 链接为蓝色标签 使用ng-cli创建新的项目一般需要安装一些新的东西后才可以进行创建成功 1.需要先安装node.js 链接: https://nodejs.org ...
- 集合线性表--List之LinkedList(队列与栈)
队列和栈1. Queue 队列(Queue)是常用的数据结构,可以将队列看成特殊的线性表,队列限制了对线性表的访问方式:只能从线性表的一端添加(offer)元素,从另一端取出(poll)元素.队列遵循 ...
- docker相关概念介绍
关键词:docker容器与docker镜像 他们之间的关系是docker容器通过docker镜像来创建 docker镜像就是些像ubuntu15.10,ubuntu14.2一样的系统 docker容器 ...
- springboot使用百度富文本UEditor遇到的问题一览(springboot controller中request.getInputStream无法读取)
先吐槽一下UEditor作为一个前端的js类库,非要把4种后端的代码给出来,而实际生产中用的框架不同,其代码并不具有适应性.(通常类似其它项目仅仅是给出数据交互的规范.格式,后端实现就可以自由定制) ...
- Cocos2d-x入门之旅[1]场景
在游戏开发过程中,你可能需要一个主菜单,几个关卡和一个END的界面,如何组织管理这些东西呢? 和其他游戏引擎类似,Cocos也使用了场景(Scene) 这个概念 试想象一部电影或是番剧,你不难发现它是 ...
- spring源码分析系列5:ApplicationContext的初始化与Bean生命周期
回顾Bean与BeanDefinition的关系. BeanFactory容器. ApplicationContext上下文. 首先总结下: 开发人员定义Bean信息:分为XML形式定义:注解式定义 ...
- Java中Integer与int对比的一些坑
Integer与int类型的关系 Integer是int的包装类,int的默认值是0,而Integer的默认值是null(我们经常在代码中使用的Integer.valueOf() 和xx.intVal ...
- flask 微电影网站
flask简介 轻量级web应用框架 WSGI工具箱才用Werkzeug 模版引擎则使用Jinja2 Flask使用BSD授权 1.virtualenv的使用 (1)创建虚拟环境:virtualenv ...