nuxt 每个页面head标签内容设置方式
导读
在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签
内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致;
所以我们需要对这三个页面单独做一个head,更加方便于SEO优化,搜索引擎的爬取;
好,我们打开index.vue,编辑如下:
head(){ return { title: 'jokes home page', meta: [{ hid: "description", name: "description", content: "this is funny jokes home page" },{ hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1.0' }] } },
我们再次打开jokes.vue,编辑如下:
head(){ return { title: 'jokes page', meta: [{ hid: "description", name: "description", content: "funny jokes page" }] } },
打开about.vue,编辑如下:
head(){ return { title: 'about page', meta: [{ hid: "page description", name: "description", content: "funny jokes about page" }] } },
每次设置修改之后,我们都需要打开当前页面的源代码查看一下,服务端渲染新head标签内容是否生效。
补充知识:nuxt 为单独的页面或组件 注入js
代码如下
head() { return { script: [ { charset: 'utf-8', src:'https://map.qq.com/api/js?v=2.exp&key=3', body: true }, { type: 'text/javascript', src: 'https://3gimg.qq.com/lightmap/api_v2/2/4/127/main.js', body: true }, { type: 'text/javascript', src:'https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js', body: true } ] } },
由于地图 只有在一个页面使用, 没必要全局引入,于是就在单个页面使用
以上这篇nuxt 每个页面head标签内容设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
nuxt 自定义 auth 中间件实现令牌的持久化操作
核心点就是在process.server下,把之前存在 cookie 中的数据再用store.commit一下 auth.js /* eslint-disable no-unused-vars */ /* eslint-disable no-useless-return */ export const TokenKey = 'Admin-token' /** * 解析服务端拿到的cookie * @param {*} cookie * @param {*} key */ export funct
-
Nuxt pages下不同的页面对应layout下的页面布局操作
有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用. pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称 请确保在布局文件里面增加 <nuxt/> 组件用于显示页面非布局内容. 举个例子 1.layouts/custom_layout.vue: <template> <div> <div class
-
nuxt.js写项目时增加错误提示页面操作
为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验. 实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户: nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法 此项目中的错误提示页面是放在layouts目录中: layouts中的error.vue页面内容为: <template>
-
nuxt 页面路由配置,主页轮播组件开发操作
在上一个章节内容中,我们开发了AppHeader公共顶部菜单导航栏组件,本章节呢,我们根据菜单导航的路由导航,来配置我们的 page页面, 去到pages目录,我们需要创建3个[nuxt_link_name].vue页面文件,用来匹配路由导航需要加载的页面: 好,我们进入命令行,来创建页面文件, 1.windows 系统下可以使用如下命令: for /r %v in ( index.vue , jokes.vue, about.vue ) do type null > %v 2.linux/ma
-
nuxt引入组件和公共样式的操作
1,引入组件 在components目录创建组件,在页面中引入组件 例如引入公共导航栏 创建组件components/Nav.vue 引入组件layouts/default.vue 2,引入公共样式 assets/css/common.css 在nuxt.config.js中引入 若引入less或者sass: 补充知识:在nuxt项目中使用component组件 编写组件页面 1.在components下新建一个新建组件页面,如下所示 2.新建完成之后初始页面的代码如下所示: 3.下面从elem
-
解决nuxt 自定义全局方法,全局属性,全局变量的问题
注意 ,这个 在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以, asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客 好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取 commom.js 测试代码 import Vue from 'vue' var comsys= { install(Vue){ Vue.prototype.comsys = { val:function(val){
-
nuxt 实现在其它js文件中使用store的方式
前言 在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面. 我们都知道如何在vue中如何使用. 代码 /* * @Description: * @Author: lxc * @Date: 2019-07-02 16:14:07 * @LastEditTime: 2019-08-14 16:08:19 * @LastEditors: lxc */ // 导出 store 的地方 imp
-
nuxt 每个页面head标签内容设置方式
导读 在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签 内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致: 所以我们需要对这三个页面单独做一个head,更加方便于SEO优化,搜索引擎的爬取: 好,我们打开index.vue,编辑如下: head(){ return { title: 'jokes home page', meta: [{ hid: "description
-
Mybatis中resultMap标签和sql标签的设置方式
目录 resultMap标签和sql标签的设置 1.项目目录 2.数据库中的表的信息 3.配置文件的信息 4.User类 5.IUserDao接口 6.MybatisTest 7.运行结果 resultMap标签的使用规则 自定义结果映射规则 association联合查询 使用association进行分布查询 collection分步查询 resultMap标签和sql标签的设置 1.项目目录 2.数据库中的表的信息 3.配置文件的信息 1.SqlMapConfig.xml文件 <?xml
-
Django之富文本(获取内容,设置内容方式)
富文本 1.Rich Text Format(RTF) 微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方 图示 2.tinymce插件 安装插件 pip install django-tinymce 配置插件 使用 后台管理中 HTMLField 页面中使用 textarea 3.在后台管理中使用 配置settings.py文件 INSTALLED_APPS 添加 tinymce 应用 INSTALLED_APPS =
-
django前端页面下拉选择框默认值设置方式
1,前端样式 2,前端html代码 <select name="row.status"> <option value="ON" {% if row.status == 'ON' %} selected="selected" {% endif %}>ON</option> <option value="OFF" {% if row.status == 'OFF' %} selected=
-
Ajax方式实现定期更新页面某块内容的方法
本文实例讲述了Ajax方式实现定期更新页面某块内容的方法.分享给大家供大家参考.具体实现方法如下: function updateShouts(){ // Assuming we have #shoutbox $('#shoutbox').load('latestShouts.php'); } setInterval( "updateShouts()", 10000 ); 希望本文所述对大家的Ajax程序设计有所帮助.
-
通过js动态创建标签,并设置属性方法
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个div的事例: <script> function fun(){ var frameDiv = document.createElement("div");//创建一个标签 var bodyFa = document.getElementById("bodyid&quo
-
Vue 实现复制功能,不需要任何结构内容直接复制方式
介绍: 在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现. 在查阅资料时候,发现其他人都需要在页面上写上结构.ID.然后捕捉某个ID获取内容,感觉很不方便. 使用: methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; // 设置内容 d
-
Django中通过定时任务触发页面静态化的处理方式
Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架,由Python写成. Django遵守BSD版权,初次发布于2005年7月, 并于2008年9月发布了第一个正式版本1.0 . Django采用了MVC的软件设计模式,即模型M,视图V和控制器C. 本章节给大家介绍Django中通过定时任务触发页面静态化的处理方式,具体内容如下所示: 安装 pip install dja
-
django为Form生成的label标签添加class方式
使用Form生成html标签的时候,虽然提供了widget的方法可以自定义标签的要是,但是只能给生成的input标签添加样式,对于生成的label标签无法添加样式. 而很多场景下需要为label和input都添加class以实现自定义样式. 测试环境 创建一个Form,通过Form帮我们生成HTML: # urls.py 文件,对应关系 path('email/', views.email), # forms.py 文件 from django.forms import Form from dj
-
vue 接口请求地址前缀本地开发和线上开发设置方式
开发环境 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./dev.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/pr
随机推荐
- PHP+jQuery 注册模块的改进(一):验证码存入SESSION
- IBM DB2 日常维护汇总(三)
- jquery实现从数组移除指定的值
- ASP.NET MVC5网站开发之添加\删除\重置密码\修改密码\列表浏览管理员篇2(六)
- Asp.net在线备份、压缩和修复Access数据库示例代码
- VC++的if语句应用范围分析
- c#使用Socket发送HTTP/HTTPS请求的实现代码
- 顶贴绝佳语句!
- C调用lua函数需要考虑的问题
- Windows服务器上lsass.exe进程CPU使用率异常问题排查方法
- CentOS 7.2下MySQL的安装与相关配置
- JavaScript生成福利彩票双色球号码
- 基于jquery实现发送文章到手机的代码
- ajaxControlToolkit AutoCompleteExtender的用法
- 基于使用递归推算指定位数的斐波那契数列值的解决方法
- NET Runtime Optimization Service 1101 错误的解决方法
- c#文件名/路径处理方法示例
- JavaScript返回当前会话cookie全部键值对照的方法
- 探寻PHP脚本不报错的原因
- Android仿微信朋友圈实现滚动条下拉反弹效果