vue设置ioc图标和title

1.ioc图标设置

在根目录中的index.html中引入代码:

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" /> 

2.title设置

首先在根目录中的index.html中加入代码:

<title>标题</title>

这样每个页面的标题都相同,不同页面的标题定制推荐使用 vue-wechat-title插件

1.安装插件

npm install vue-wechat-title

2. 在 main.js 中加入

import VueWechatTitle from 'vue-wechat-title';
Vue.use(VueWechatTitle)

3. 路由中加下 title

{
path: '/Login',
/* * 按需加载 */
component: (resolve) => {
require(['@/components/Login.vue'], resolve)
},
meta: {
title: '登录'
}

}
}

4. 在app.vue 中修改 router-view ,加入他的这个组件

<router-view v-wechat-title="$route.meta.title"></router-view>

正常的话,你再访问就能看到自己写的标题了

参考自:https://www.cnblogs.com/jshare/p/7421670.html

vue设置title和ioc图标的更多相关文章

  1. Vue设置页面的title

    原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html 前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个inde ...

  2. 设置 iOS 应用的图标和名称

    Xcode 8.1 设置 iOS 应用的图标和名称的方法: 设置应用图标: 1.在 Resources 中添加图片: 2.在 Icon file 的属性值填写图标文件的名称. 设置应用名: 1.修改 ...

  3. angular设置title

    Javascript框架在处理seo方面存在问题,因为爬虫在检索seo信息的时候会读不了js给其赋的值,导致搜索引擎收录不了或者收录了无效的信息,比如收录的可能是title={{title}}这样的, ...

  4. Discuz X3.2 SEO设置 title 不支持空格的解决方法

    很多使用 Discuz X3.2 的同学都发现这么一个问题:在后台SEO设置-title设定的时候,即使你在连字符两侧输入了空格,在前台也显示不出来,很多同学纠结这个问题,今天终于找到了解决方法,在此 ...

  5. iOS 11 导航栏 item 偏移问题 和 Swift 下 UIButton 设置 title、image 显示问题

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  6. win10 常用设置 桌面出来计算机图标,固定桌面摆好的图标设置方法,电脑设备ID方法

    win10 常用设置 桌面出来计算机图标,固定桌面摆好的图标设置方法 桌面右键-->显示设置-->桌面图标设置 电脑设备ID:xxx查看方法:桌面右键-->显示设置-->关于

  7. VUE中实现iview的图标效果时遇到的一个问题

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...

  8. QT如何设置应用程序的图标

    QT如何设置应用程序的图标 准备:.ico格式的图片,可以选择任意其他图片格式的一张图片用格式工厂转换成.ico图片     例如选用的图片是Application.ico 把图片放到工程目录下 在工 ...

  9. 修改tomcat小猫图标,设置项目的favicon图标

    修改tomcat小猫图标,设置项目的favicon图标,方式有两种:全局方式和局部方式 1.全局方式: 进入tomcat服务器\webapps\ROOT,然后用自己项目的favicon.ico替换to ...

随机推荐

  1. LARAVEL IOC容器 示例解析

    <?php class People { public $dog = null; public function __construct() { $this->dog = new Dog( ...

  2. SimpliciTI无线开发 — 快速搭建低功耗、低成本无线传感器网络

    一.初闻SimpliciTI SimpliciTI是TI在2007年宣布推出的针对小型简单RF网络的专有低功耗协议,因其简化了具体的实施操作,降低对微控制器资源的占用,故基于SimpliciTI的RF ...

  3. >=< 在set和dict中的不同

    两个dict比较的算法是,长度>键>值,由于dict无序,所以比较的时候会自动将键对齐比较,我们不用担心这个. >>> d1 = dict(x=1, y=2) >& ...

  4. mysql的master和slave同步方案

    同步原理 master将改变记录到二进制日志(binary log)中 slave将master的binary log events拷贝到它的中继日志(relay log) slave重做中继日志中的 ...

  5. Jmeter聚合报告

    Label:请求的Name. #Samples:发出请求数量. Average:平均响应时间(单位:ms). Median:全部响应时间中位数,. 90%Line:90%用户的响应时间低于这个时间. ...

  6. BZOJ4832: [Lydsy1704月赛]抵制克苏恩(记忆化&期望)

    Description 小Q同学现在沉迷炉石传说不能自拔.他发现一张名为克苏恩的牌很不公平.如果你不玩炉石传说,不必担心,小Q 同学会告诉你所有相关的细节.炉石传说是这样的一个游戏,每个玩家拥有一个 ...

  7. GCD 深入理解(二)

    转自@nixzhu的GitHub主页(译者:Riven.@nixzhu),原文<Grand Central Dispatch In-Depth: Part 2/2> 欢迎来到GCD深入理解 ...

  8. 重温CLR(十一) 枚举类型、位标志和数组

    枚举类型 枚举类型(enumerated types)定义了一组"符号名称/值"配对.例如,以下Color类型定义了一组符号,每个符号都标识一种颜色: internal enum ...

  9. phoenix elixir 框架简单试用

    备注:   官方提供的脚手架工具,我们可以直接使用,生成代码,同时需要nodejs 环境配置(比较简单,参考 相关资料即可)  1. 安装脚手架 mix archive.install https:/ ...

  10. elixir 调用erlang 代码

    备注:    项目比较简单,主要是elixir 混合erlang 代码,elixir 调用erlang 模块方法   1. 初始化项目   mix new erlangelixirdemo 项目结构如 ...