浅谈vue2 单页面如何设置网页title

前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置title标签的做法是不行的。

推荐使用vue-wechat-title插件

下载安装插件依赖

npm install vue-wechat-title --save

在main.js中引入插件

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

在路由文件 index.js中给每个路由添加title

 routes: [{
  path: '/',
  name: 'index',
  component: index,
  meta:{
    title:'首页' // 标题设置在这里
  }
 },{
  path:'/detail',
  name:'detail',
  component:detail,
  meta:{
    title:'详情页' // 标题设置在这里
  }
 }]

在app.vue中修改router-view组件

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

重启试试,可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法 首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu

  • 浅谈vue2 单页面如何设置网页title

    前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次.对于现在的前端框架,传统的每个页面设置title标签的做法是不行的. 推荐使用vue-wechat-title插件 下载安装插件依赖 npm install vue-wechat-title --save 在main.js中引入插件 import VueWechatTitle from 'vu

  • 浅谈Vue单页面做SEO的四种方案

    目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,

  • 浅谈vue单页面中有多个echarts图表时的公用代码写法

    html中: <div class="charts1"/> <div class="charts2"/> <div class="charts3"/> <div class="charts4"/> <div class="charts5"/> <div class="charts6"/> <div class=

  • 浅谈vue同一页面中拥有两个表单时,的验证问题

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 我们可以通过为两个表单添加ref属性 之后在通过调用resetFields()方法来解决问题 代码如下 <el-form :model="form" :rules="rules" ref="form" label-width="100px"> this.$refs["form"]

  • 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法

    vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理. 如果需要使用sass,则安装: npm install node-sass --save-dev npm install sass-loader --save-dev 如果需要使用less,则安装: npm install less --save-dev npm install less-loader --save-dev sass

  • 浅谈pc端rem字体设置的问题

    1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-SIZE设置为正常值,12PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大. 3.当浏览器窗口变化时,内容的大小

  • 浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用

    vue父子组件之间的传值我们都知道使用props和emit,但是祖孙之间的传值在以前,我们都需要子辈作为中间人,当祖辈有值要传递给孙辈时,需要子辈作为中间人把值传递给孙辈,当孙辈想要改变祖辈的值时,需要先emit子辈的方法,然后子辈再emit父辈的方法从而改变祖辈的值,如果是多级组件嵌套的话,那么祖孙辈之间传值,就会变得非常的繁琐,为了解决这个需求,vue2.4版本产生了$attrs,$listeners,inheritAttrs这三个属性. vm.$attrs 官方API vm.$attrs

  • 浅谈如何使用python抓取网页中的动态数据实现

    我们经常会发现网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念,动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到浏览器后动态生成的,而之前并没有的. 在编写爬虫进行网页数据抓取的时候,经常会遇到这种需要动态加载数据的HTML网页,如果还是直接从网页上抓取那么将无法获得任何数据. 今天,我们就在这里简单聊一聊如何用python来抓取页面中的JS动态加载的数据. 给出一个网页:豆瓣电影排行榜,其中的所有电影信息都是

  • 浅谈vue2的$refs在vue3组合式API中的替代方法

    如果你有过vue2的项目开发经验,那么对$refs就很熟悉了.由于vue3的断崖式的升级,在vue3中如何使用$refs呢?想必有遇到过类似的问题,我也有一样的疑惑.通过搜索引擎和github,基本掌握如何使用$refs.在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用. 最近业余在学习vue3项目<蜡笔(Crayon)管理模板:Vue3 + Vuex4 + Ant Design2>开发,这两天迭代推进了一点,实现了chart图表组件,写文章的时候发现提交代码的co

  • 浅谈js中子页面父页面方法 变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名 window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 例如:想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById(&q

随机推荐