vue 设置头文件

最新推荐文章于 2024-01-29 16:08:19 发布

会做饭的技术男

最新推荐文章于 2024-01-29 16:08:19 发布

阅读量842

点赞数

分类专栏：前端文章标签： vue

原文链接：https://www.mk2048.com/blog/blog.php?id=h1j1j1ci2c1j&title=vue+%E8%AE%BE%E7%BD%AE%E5%A4%B4%E6%96%87%E4%BB%B6

版权

前端专栏收录该内容

2508 篇文章 11 订阅

订阅专栏

vue的头文件是在index.html文件中设置的，毕竟vue的入口

先说一下标签页的名字：

就是这个名字的设置，要想每个标签页的名字都不一样，需要做以下这三步：
1. 首先，在index.html文件的head标签里加上title标签，内容我们用变量来表示

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>{{title}}</title>

</head>

2. 在index.js文件里，也就是路由文件里，在你写的路由里面，加上title项：

path: '/console/front/privilege',
component: resolve => require(['../components/common/Home.vue'], resolve),
meta: {title: '特权'},　　# 这样

3. 在main.js里，用到以前说过的beforeEach钩子函数，写一个判断，来替换index.html里的这个title变量

if(to.meta.title){
   document.title = to.meta.title
  }

再来说一下这个logo，

就在index.html里面加上这个link标签就行了，href写你本地的文件路径，或者一个网络地址

  <link rel="icon" type="image/ico" href="/static/img/favicon-32.ico" />

优惠劵

会做饭的技术男

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue 设置头文件

vue的头文件是在index.html文件中设置的，毕竟vue的入口先说一下标签页的名字：就是这个名字的设置，要想每个标签页的名字都不一样，需要做以下这三步： 1. 首先，在index.htm...
复制链接

扫一扫

专栏目录

vue-head：管理head标签的元信息，一种简单的方法

02-06

头操作head标签的元信息，一种简单的方法由激励有关旧版本的语法，用法通过CDN ... < script src =" https://cdnjs.cloudflare.com/ajax/libs/vue/*version*/vue.min.js " > </ script > < script src =" https://cdnjs.cloudflare.com/ajax/libs/vue-router/*version*/vue-router.min.js " > </ script > < script src =" https://cdn.rawgit.com/ktque

vue跳转带head_Vue项目使用全局header踩坑记

weixin_39613188的博客

12-20

2497

开发了一个钉钉内置WebApp，对于钉钉的header操作API非常不满，IOS和安卓下表现不一致，操作困难，API文档写的不详细等等。这里自己尝试实现一遍这个头部，方便以后使用。需求：① header不参与各组件和路由跳转② header分成左侧返回箭头、中间title和右侧操作区域3部分③ 左侧箭头可控制是否显示和返回路由URL设置；title使用router设置meta.title；右侧操作...

1 条评论您还未登录，请先登录后发表或查看评论

vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容

最新发布

工作中遇到问题记录

01-29

1221

vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容

Vue项目中设置背景图片方法

08-28

下面小编就为大家分享一篇Vue项目中设置背景图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue设置默认首页的操作

10-14

主要介绍了vue设置默认首页的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 设置 input 为不可以编辑的实现方法

10-16

今天小编就为大家分享一篇vue 设置 input 为不可以编辑的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue的引入-(Vue学习-01)

code^_^熊的博客

01-26

310

Vue的引入可以在<head>标签中引入vue.js的文件。示例 <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> vue.js文件的来源链接: Vue.js. 进入连接中的网页后，往下滚动页面找到下图中所示，“开发版本”和“生产版本”都可以下载使用。其他引

vue-element-admin 综合开发三：header组件的实现、vuex的使用、main组件（home页面）的实现

冯安晨

08-11

2305

vue-element-admin 综合开发三：header组件的实现、vuex的使用、main组件（home页面）的实现

vue head（vue-meta编写页面head信息）

林雨的博客

08-10

5343

vue-meta vue-meta可以为单个页面设置head信息模块安装 npm install vue-meta --save main.js中注册并使用vue-meta模块 import Meta from 'vue-meta' Vue.use(Meta) //注册使用vue-meta模块使用vue-meta模块 <script> metaInfo: { title: 'vue-meta设计', //设计页面标题 }, </script&g

vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

leng0920的博客

03-10

3233

vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏在app.vue文件里引入公共的header 和 footer header 和footer默认显示，例如某个页面不需要显示header 可以使用 this.$emit('header',false);来控制header不显示例如：test页面不需要显示header，在页面被创建的时候广播(this.$emit)...

vue设置一开始进入的页面教程

10-16

今天小编就为大家分享一篇vue设置一开始进入的页面教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue-meta动态管理vue项目HTML中head头部信息（可传变量）

qq_33991007的博客

03-06

2255

1、安装 npm install --save vue-meta plugin 2、引入main.js中 3、在vue文件中进行如下配置重点注意：其中metaInfo写为一个方法，这样可以接收变量，如果不写为方法的话，无法读取data及computed中的信息。 ...

vueRouter基础

空那个白的博客

07-30

145

VueRouter Vue Router 是Vue.js官方的路由管理器，简单理解可做vue项目导航一、安装（搭建vue-cli时会选择然后默认配置好） npm install vue-router 二、使用 1、非vue-cli中使用路由（1）html头文件中引入vue.js和vue-router.js （2）html页面布局（3）js中配置路由 2、在...

Vue——引入Vue的方法、VM对象和基础指令（面试）

qq_52301431的博客

08-29

5067

v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等，插值表达式中的标识符代表vue对象中的data的属性名或者methods中的方法名。//下载官方脚手架到全局，集成webpack的环境，能生成webpack的这个软件就是脚手架（cli一般指的是自动化）......

vue 配置公共头部(header)

热门推荐

周家大小姐

01-07

2万+

需求:整个项目;每个项目都有头部但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部; App.vue <template> <div id="app"> <div class="header" v-if="isShowHeader" id="headers"> &lt

vue中两种数据请求方式

a1031601764的博客

04-19

2314

axios: axios属于第三方插件，需要引入。 axios返回的结果是一个Promise对象。 get方式的请求：第一种写法 axios.get('http://localhost:8080/xxx.php', { method : 'get', params : { a : 1, b : 2 } }).then ( (res) =>{ console.l...

Vue - 使用 js 方式将 css 样式添加到 head 标签中

技术共享，共同进步！

09-25

1520

使用 js 方式将 css 样式添加到 head 标签中

vue项目优化配置CDN加速

Passerby_K的博客

04-24

822

在 vue.config.js 文件中配置如下： // 设置cdn 资源 const cdn = { // 忽略打包的第三方库 /** * externals 对象属性解析： * '包名' : '在项目中引入的名字' * 以element-ui举例我再main.js里是以 * import ELEMENT from 'element-ui' * Vue.use(ELEMENT, { size: 'small' }) * 这样引入的，所以我的externals的属性值应该是E

vue axios头文件封装

01-18

以下是Vue中使用axios进行头文件封装的示例：在`http.js`文件中，我们可以定义一个axios实例，并设置默认的请求头信息： ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'http://api.example.com', // 设置请求的基础URL timeout: 5000, // 设置请求超时时间 headers: { 'Content-Type': 'application/json', // 设置请求头的Content-Type 'Authorization': 'Bearer token' // 设置请求头的Authorization } }) export default instance ``` 然后，在`main.js`中引入并使用这个axios实例： ```javascript import Vue from 'vue' import axios from '@/assets/js/http.js' Vue.prototype.$http = axios new Vue({ // ... }).$mount('#app') ``` 现在，你可以在Vue组件中使用`this.$http`来发送请求，并且默认的请求头信息会被自动添加到每个请求中。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交