vue项目动态设置页面title及是否缓存页面的问题

跟传统的页面可以在每个页面分别设置填写对应的页面title,but,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，可以在最外层的div上设置v-wechat-title="$route.meta.title"再动态去改变title即可

<template>
 <div class="hours-con container" v-wechat-title="$route.meta.title">
   .....
 </div>
</template>

//js动态设置,即可在跳转页面时根据条件改变title了
if(zong){
 this.$route.meta.title = '总课时'

说到路由添加meta配置，还有一个比较常用的是keepAlive，它可以设置页面是否缓存，具体如下：

meta: {

 keepAlive: true
 }

然后设置.vue文件的router-view

<keep-alive>

<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

/启用页面缓存/

<router-view v-if="!$route.meta.keepAlive"></router-view>

/页面不缓存/

回到设置页面title的话题

但是最近做过一个项目是基于vue的nuxt.js，路由是根据项目目录结构自动生成的，按之前的方法又行不通了，经过探索发现，nuxt.js项目设置title也不难，只需在对应的.vue文件添加

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

赞 (0)

相关推荐

  • 详解vue-router数据加载与缓存使用总结

    之前开发了一个单页面应用,按照深度,分为三层:目录页.一级子页(标签页.故事页等).二级子页(故事编辑页). 这三类页面都共享一个完整的数据model,从上级页面进入下一级页面时,能够加载相应数据:回到上一级时,数据有更新.举个栗子,从故事页点击"编辑"按钮,进入故事编辑页则默认填充点击的"编辑"按钮所对应的故事数据:而当在故事编辑页更新数据,返回到故事页时,刚刚更新的信息也能在故事页展示. 对于这项需求,我们需要解决如下几个问题: 三层页面共享数据: 进入或退回当

  • 关于vue里页面的缓存详解

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-alive标签内部添加 include:字符串或正则表达式.只有匹配的组件会被缓存 exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. 结合router缓存部分页面: 比较实用的例子: 思路:通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值.从而动态的

  • vue项目中实现缓存的最佳方案详解

    vue项目中实现缓存的最佳方案详解

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,

  • vue 详情跳转至列表页实现列表页缓存

    甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新.位置固定到之前点的商品的位置) 本来想着scrollBehavior应该可以满足,但是实际操作中发现:如果列表带着分页,位置是不会定位到点击的位置的 在网上转了一圈,终于找到适合自己的方法--beforeRouteLeave 注:beforeRouteLeave只对一级页面起作用,不适用于children中的其他二级或其他级别的页面 以上是准备工作,接下来 可以步入正题

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    写在前面 一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的.最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作.但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候. 如此,针对上述两种使用场景,需要实现按需读取页面缓存.由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果. 使用技术 Vue.js作为主要框架 Vue-router作为前端路由管理器 Vue

  • 详解Vue中组件的缓存

    详解Vue中组件的缓存

    之前在<Vue一个案例引发的动态组件与全局事件绑定总结>这篇文章中简单提到过组件的缓存.当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存. 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来. 自然就存在组件之间的切换问题,Vue 中有个「动态组件」的概念,它能够让我们更好的实现组件的切换. 在实际的项目开发中,产品是不可能放过我们的,需求总是在不停的变化,如果你碰到那些不改需求的产品就嫁了吧,太难得了. 最近项目中

  • vue项目动态设置页面title及是否缓存页面的问题

    vue项目动态设置页面title及是否缓存页面的问题

    跟传统的页面可以在每个页面分别设置填写对应的页面title,but,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', comp

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

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • 为vue项目自动设置请求状态的配置方法

    在进入一个页面的时候,一般在获取数据的同时,会先显示一个 loading ,等请求结束再隐藏 loading 渲染页面,只需要用一个属性去记录请求的状态,再根据这个状态去渲染页面就好了 async handler() { this.loading = true await fetch() this.loading = false } 虽然是很简单的功能,可是要处理的地方多的时候,还是很繁琐的,就想着能不能统一设置处理请求的 loading ,然后页面根据 loading 的状态决定要显示的内容,

  • vue项目实现设置根据路由高亮对应的菜单项操作

    高亮显示菜单是很常见的一个场景 首先,在router-link标签上绑定对应的路径 然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单 也可以在router路由数组里面设置meta信息,然后根据这个信息来判断是否高亮(这里可以循环生成菜单,不过我没有写)只是说一下思路 这样即可根据路由实现对应的菜单高亮了,我个人认为第二种比较灵活,如果菜单嵌套很多可以用第二种 补充知识:vuecli项目怎样使用jsx 有时候用jsx写页面可能更灵活,当然在vue中写

  • vue.js动态设置VueComponent高度遇到的问题及解决

    目录 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 2.获取VueComponent标签生成的元素的高度 3.判断一个对象是jQuery对象还是DOM对象 vue动态获取.设置组件高度 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 <div v-for="data in list">     <div ref="abc">{{data.id}}</div> &

  • React项目动态设置title标题的方法示例

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢? 1.在定义路由时增加title属性. { path: "/regularinvestment", component: Loadable({ loader: () => import('./../../business/Regularinvestment/index'), loading: Page

  • vue中动态设置meta标签和title标签的方法

    vue中动态设置meta标签和title标签的方法

    因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name: 'Article', component: Article, meta: { t

  • vue+vue-meta-info动态设置meta标签教程

    vue+vue-meta-info动态设置meta标签教程

    目录 vue-meta-info官方介绍 vue-meta-info使用 在写移动端项目的时候,通常都会设置meta禁止用户缩放. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 最近的需求中,个别页面允许用户缩放,就需要给不同的页面设置不同的meta

  • vue 实现动态设置元素的高度

    目录 vue动态设置元素的高度 获取元素高度总是不准确的问题 解决办法 vue动态设置元素的高度 1. 添加样式绑定 <div class="container" :style="{height: scrollerHeight}"> </div> 2. 添加属性计算 computed: {     // 滚动区高度      scrollerHeight: function() {       return (window.innerHeig

  • Vue项目如何设置反向代理和cookie设置问题

    目录 Vue设置反向代理和cookie设置 项目场景 问题描述 原因分析 解决方案 Vue项目使用js-cookie细则 什么是js-cookie 在项目中进行安装 在项目中的入口文件(main.js)全局引入 在项目中使用 Vue设置反向代理和cookie设置 项目场景 最近使用Vue开发一个新的项目,因为服务器还没到,调取后端本地接口,因为请求接口的时候没有跨域,就没开反向代理.后面就被一个很基础的东西踩了坑,就是 cookie的一些知识,记录一下,加深一下印象. 问题描述 联调过程中,发现

随机推荐