vue spa 设置不同title

vue动态设置页面title方法

第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', component: Login, meta: { title: '登录' } } 如果是公共组件,在跳转时根据条件来动态设置title,可以在最

单页应用动态设置页面title

1.适用场景:所有通过router路由的单页应用. 2.示例代码:本文以vue-router为例. 在router.js中: let router = new Router({ routes: [ { path: '/', title: '', redirect: '/chooseCity' }, { path: '/login', title: '', component: resolve => require(['components/login/login.vue'], resolve)

vue+vue-resource设置请求头(带上token)

前言有这样的一个需求,后台服务器要求把token放在请求头里面嗯一般是通过data里面通过参数带过去的第一种方法全局改变: Vue.http.headers.common['token'] = store.state.token; 之前是吧token刚在data里面的是我封装的一个get 请求,亲测有用.现在我们项目就是用的这一种然后放一个请求成功的实例首先会先发一个 OPTIONS 预请求然后发出正式请求第二种方法: 不能局限于一种方法嘛! 第二种方法是:在Vue实例中设置

正确设置网站title、keywords、description（转载）

本文转载自蚂蚁HR(www.mayihr.com) 优化技巧是老师在课堂上教不了你的,而自己也不可能在练习中领悟,最便捷的方法就是听取别人的经验,所以转载一下 1.title(网站标题) title,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要.)title一般不超过80个字符,而且词语间要用英文“-”隔开,因为计算机只对英语的敏感性较高,对汉语的敏感性不高. 用法:<title>网站标题&l

nginx 设置进程title

刚好看到nginx设置进程title的源码,因此做一些总结. linux进程实际是以argv[0]处的值来作为进程的title的,因此若需要修改进程的title只需要修改argv[0]处的值即可. 简单的方法就是直接将想要设置的title复制给argv[0]即可,如下示: 1: #include <stdio.h> 2: #include <stdlib.h> 3: #include <string.h> 4: #include <unistd.h> 5:

Vue 项目代理设置的优化

Vue 项目代理设置的优化 Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式, 这种方式开发中,最常用到的模式是开启代理进行 mock 调试或远程调试, 也就是使用了 Vue-cli 设置的配置 proxyTable 或者直接使用 Webpack-dev-server 提供的 proxy 选项.它是采用了 http-proxy 库,所以具体配置可查看: https://github.com/nodejitsu/node-http-proxy#options 利用配置的这些

Vue SPA 首屏加载优化实践

写在前面本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router-sync 将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit n

Vue. 之替换左上角 title标签处的图标

Vue. 之替换左上角 title标签处的图标 1.icon命名为favicon.ico放在项目的位置:src/assets/favicon.ico 2.在index.html中写入: <link rel="shortcut icon" type="image/x-icon" href="src/assets/favicon.ico" media="screen" > <!DOCTYPE html>

vue项目设置每个页面的title

1.在项目目录下安装vue-wechat-title 2.在main.js中使用vue-wechat-title 3.在router的配置中设置 4.在每个vue页面中加入 <div v-wechat-title="$route.meta.title"></div>

[vue]spa单页开发及vue-router基础

- 了解spa页面跳转方式:(2种) spa: 单页跳转方式开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushState('','','/test'); 只更改url,不会刷新,手动刷新后可能会404 npm install vue vue-router axios bootstrap - vue-router 1.创建vue-router实例 2.在vm里关联 3.手动访问, 链接后追加#/home 或 #

Vue SPA应用中使用Layer的iframe 弹出层,并且传值

问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px'], fixed: false, //不固定 maxmin: true, title:title, content:url, }); 正常引入layui.js 然后弹出,然后弹出层要调用父级层的方法,和赋值 var index = parent.layer.getFrameIndex(windo

设置html title标题左侧的小图标

网页title旁边的小图片设置,图片要求格式必须是.ico,可以使用在线的转换工具把jpg和png图片转换为ico图片,工具地址:http://www.ico.la/ 在html文件中的<head></head>标签中加上: <link rel="icon" href="img/logo.ico" type="img/x-ico" />

关于webstorm 对 vue的设置

1. 首先安装vue插件,安装方法: setting --> plugin ,点击plugin,在内容部分的左侧输入框输入vue,会出现两个关于vue的插件,点击安装即可.安装完成后,就可以看到,新建文件时,会有vue文件的提示. 如下图所示: 2. 设置vue新建文件模板. 步骤: settings --> file and code templates .在内容区域左侧点击vue file,修改对应的模板内容即可. 如下图所示: 3. 设置vue文件支持的编码格式(例如:支持的缩

vue.js设置、获取、删除cookie

项目需要前端获取后台返回的cookie,并以此作判断.我是在main.js入口文件下使用的具体代码: new Vue({ el: '#app', router, template: '<App/>', components: { App }, methods:{ //读取cookie,需要注意的是cookie是不能存中文的,如果需要存中文,解决方法是后端先进行编码encode(),前端取出来之后用decodeURI('string')解码.(安卓可以取中文cookie,IOS不行) g

vue+el-menu设置了router之后如何跳转到外部链接

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router> <templa

vue2 设置网页title的问题

好东东,没个标题看着多难受看到1文章 http://blog.csdn.net/qishuixian/article/details/72912368 推荐使用 vue-wechat-title插件 npm install vue-wechat-title --save 下看后我的使用方式 1. 在 main.js 中 import VueWechatTitle from 'vue-wechat-title'; Vue.use(VueWechatTitle) 这样就能用了 2. 路由中加

vue: WebStorm设置快速编译运行

WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试. 本文介绍设置Webstorm进行快速部署Vue项目. 第一步点击启动快捷按钮旁边的向下小箭头,在列表中选择Edit选项: 第二步打开启动设置页面后,点击左上角的加号添加新的运行方式: 第三步在弹出的选择框中,选择node.js启动模式: 第四步在新打开的设置页面中,在红色圈中的地方设置如图路径的文件: 至此设置成功,直接点启动按钮就可以部署项目.

Vue Spa切换页面时更改标题

在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx"; 随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖. <script> export default {

vue本地设置请求接口及数据

1.安装axios yarn add axios 2.在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 Vue.prototype.getRequest = getRequest;//注入到vue对象 Vue.prototype.postRequest = postRequest;//注入到vue对象 3.创建api接口 1:src目录下创建libs文件夹 2:在libs文件夹中创建api.js接口文

webstorm vue环境设置

1. 首先安装vue插件,安装方法: setting --> plugin ,点击plugin,在内容部分的左侧输入框输入vue,会出现两个关于vue的插件,点击安装即可.安装完成后,就可以看到,新建文件时,会有vue文件的提示. 如下图所示: 2. 设置vue新建文件模板. 步骤: settings --> file and code templates .在内容区域左侧点击vue file,修改对应的模板内容即可. 如下图所示: 3. 设置vue文件支持的编码格式(例如:支持的缩

vue spa 设置不同title

热门专题