Vue项目中设置每个单页面的标题
两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐)
首先在路由文件index.js中给每个单页面路由添加title
routes: [{
path: '/',
name: 'index',
component: index,
meta:{
title:'首页标题'
}
},{
path:'/detail',
name:'detail',
component:detail,
meta:{
title:'详情页标题'
}
}]
第一种方法:引入vue-wechat-title插件
1.下载安装插件依赖
npm install vue-wechat-title --save-dev
2.在入口文件main.js中引入并使用
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
3.在app.vue中修改<router-view>标签
<router-view v-wechat-title='$route.meta.title'></router-view>
第二种方法:编程方式实现
直接在入口文件main.js中添加如下代码即可
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
完啦,噜啦啦.......
这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
扫二维码加为好友就完事了!安排~
Vue项目中设置每个单页面的标题的更多相关文章
- 在vue项目中设置BASE_URL
在vue项目中设置BASE_URL 1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' expor ...
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- 在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...
- vue项目中利用popstate处理页面返回操作
需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监 ...
- 在vue项目中添加一个html页面,开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
- vue项目中设置跨域
config->index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/ ...
- vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...
随机推荐
- CF633(div.2)B. Sorted Adjacent Differences
题目描述 http://codeforces.com/contest/1339/problem/B 有一个长度为 \(n(3\le n \le 10^5)\) 的整数序列 \(a_1,a_2,..., ...
- Ceph学习笔记(3)- Monitor
Ceph学习笔记(3)- Monitor 前言: Ceph将cluster map与placement rule合并为一张表称为crush map,作为集群表的一部分.由Monitor对集群表的副 ...
- c++用递归法将一个整数n转换成字符串
任务描述 用递归法将一个整数n转换成字符串.例如,输入483,应输出字符串“483”.n的位数不确定,可以是任意位数的整数. 测试输入: 预期输出: 程序源码: #include <stdio. ...
- 30 HashSet
/* * 使用HashSet存储字符串并遍历 * * Set的特点: * 无序(存储和读取的顺序可能不一样) * 不允许重复 * 没有整数索引 于List正好相反 */ public class Ha ...
- HBase Shell 十大花式玩儿法
前言:工欲善其事必先利其器,今天给大家介绍一下HBase Shell十大花式利器,在日常运维工作中,可以试着用起来. 1. 交互模式 也就是我们最常用到的Shell命令行的方式. $ hbase sh ...
- 初探CI,Github调戏Action手记——自动构建并发布
前言 最近在做脚本的说明文档时使用了vuepress这个东西 前端实在是菜,只能随便写写了 正常写完md文件之后推送至github做版本控制 而前端页面的生成则是在本地,部署也是在本地手工进行 一套下 ...
- go 中的WaitGroup
wait_group sync.WaitGroup 类型是并发安全的,也是开箱就能用的. 该类型有三个指针方法,即:Add,Done和Wait. sync.WaitGroup是一个结构体类型.其中一个 ...
- iOS 头条一面 面试题
1.如何高效的切圆角? 切圆角共有以下三种方案: cornerRadius + masksToBounds:适用于单个视图或视图不在列表上且量级较小的情况,会导致离屏渲染. CAShapeLayer+ ...
- AJ学IOS(18)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
AJ分享,必须精品 先看图片 第一步完成tableView和Cell的架子的图 完善图片 键盘弹出设置后图片: 自动回复图: 粗狂的架子 tableView和Cell的创建 首相tableView为了 ...
- OkHttp 优雅封装 HttpUtils 之 气海雪山初探
曾经在代码里放荡不羁,如今在博文中日夜兼行,只为今天与你分享成果.如果觉得本文有用,记得关注我,我将带给你更多. 介绍 HttpUtils 是近期开源的对 OkHttp 轻量封装的框架,它独创的异步预 ...