动态改变vue项目页面的title
其实也没啥,就是一句代码的事,只不过看在哪里执行而已。这句代码是:
document.title = "新题目";
一、动态改变vue项目页面的title
vue只是一个前端框架,有自己的一些语法,但归根到底,还是要编译成原生的javascript代码才能被浏览器执行。同时,原生的javascript代码,它还是认的。不过,这些代码要放在合适的位置。完整例子如下。
这个例子中,页面的title,跟随从服务器端返回的数据而动态变化。title的结构为“当前展示信息的名称 - 网站名称”。
<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";const appConfig = require("/public/config");export default defineComponent({props: { fId: { default: 0 } },setup(props) {const folderInfo = reactive({fd: {logo: "",category: "",name: "",org: "",note: "",seaarea: "",fileNum: "",},});onMounted(async () => {//页面加载即执行search(props.fId);});watch(//监控属性值。属性值变化即重新获取数据,title于是随之变化() => props.fId,(val) => {search(val);});const search = (fId) => {folder.getDetail(fId).then((res) => {const fd = res.data;folderInfo.fd = fd;//关键的一句//appConfig.app.name,是配置文件中定义的网站名称,如“订餐谁拿饭抓阄规划监督管理评估系统”document.title =`${fd.name}[${tools.getDataTime(fd)}] - ` + + appConfig.app.name;}).catch((err) => {console.log(err);});};return {...toRefs(folderInfo),};},
});
二、页面title从配置文件中读取
上面说到,网站名称作为页面title的一部分,是从配置文件中定义的。这个机制是咋样的呢?
vue这类框架,搞出来的项目,都是单页面项目。就是说,别看这个项目好像挺大,但只有一个页面,运行过程中,所有的“页面”都是通过JS脚本动态切换和加载的。这种情况下,将title直接写到public/index.html里,当然也是可以的。
但是,title通常写的都是系统名称,而系统名称在一个项目里,至少有三个地方要用到:页面title,登录页面,登录后页面的页头。作为程序员,很自然就想到,应当将这个系统名称写到配置文件里,这三个地方都从配置文件里读。
具体机制可看这里
vue项目读取全局配置
动态改变vue项目页面的title相关推荐
- 怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
- vue 设置每个页面的title
vue 设置每个页面的title 由于vue文件中只有一个Index.html 文件 title 显示需要通过document.title来设置 1.router---index.js文件中添加met ...
- 使用vue-router设置每个页面的title
基本环境配置: webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' ...
- 页面的title为乱码的话需要修改jsp页面pageEncoding=UTF-8
页面的title为乱码的话需要修改jsp页面pageEncoding="UTF-8" 转载于:https://blog.51cto.com/javazyx/1301876
- vue 动态绑定href a href动态改变 vue href改变 vue 修改href
如何在vue项目中动态改变href 问题: 由于将所有api都放在一个js中,对于下载或者有外链时需要使用a标签,那么就需要引用js文件,但是发现a标签不能直接引用外部js的参数: 解决办法: 使用计 ...
- android读取网页标题,如何获取WebView中页面的Title信息
应用开发中需要获取WebView当前页面的标题,可能通过对WebChromeClient.onReceivedTitle()方法的重写来实现 代码如下:public class MainActivit ...
- 使用vue-router的meta实现 设置每个页面的title标题
1.实现效果(左上角title变化) 2.核心代码: 1.这里主要是 meta 属性下面设置一个自定义的键值 title 2.在前置导航守卫里面如下: router.beforeEach((to,fr ...
- 修改母版中页面的Title
三.修改母版页的内容.(原创:灰灰虫的家http://hi.baidu.com/grayworm) 当我们在运行不同的内容页面时,要求母版面的内容也会根据不同的内容页面发生不的变化时,如何做呢?比如, ...
- vue 项目修改网页 title 和 图标
修改网页 title 和 图标 网页 title 位置 和 图标位置 修改路径在 项目文件下的 public 文件夹下的 index.html 文件中的 title 里面 // 在html 中 引入文 ...
最新文章
- 火箭队老板成比特币粉丝 旗下豪车经销商接受BTC、BCH支付
- 域名解析跳转到另一个域名_github建立静态网站,域名解析和跳转
- Elasticsearch master节点的作用以及脑裂现象
- “睡服”面试官系列第十五篇之对象的扩展(建议收藏学习)
- mybatis中refid是什么意思
- 宠物兽医体层摄影术行业调研报告 - 市场现状分析与发展前景预测(2021-2027年)
- 计算两个日期之间相差的天数(带带负数) 支持格式YYYY-mm-dd和YYYY-mm-dd HH:mm:ss...
- 《码出高效---java》PDF,有学习java的小伙伴可以看看,阿里巴巴出版的书籍
- 象棋人机对弈程序的思想
- Electron 设置透明窗口transparent 属性win7无效详解
- MAC IDEA常用快捷键
- JAVA 16方格排序游戏
- contiki学习笔记(八)rtimer stimer 计时器库
- NOI / 1.5编程基础之循环控制——01:求平均年龄
- runtime error python怎么解决_RuntimeError: Python is not installed as a framework 错误解决方案...
- Qt 信号槽的应用(三)
- 酷安市场WanAndroid 客户端1.7版
- C# Task不执行的一种情况
- (Math)矩阵求导
- MATLAB学习心得~