vue项目动态设置页面title及是否缓存页面的问题
作者：barry_mr_杨 发布时间：2024-04-10 10:23:52
标签：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文件添加
来源：https://segmentfault.com/a/1190000016940875
0
投稿猜你喜欢
- php循环输出26个大小写英文字母for($i=65;$i<91;$i++){ echo strtolower(chr($
- asp自定义错误显示方法：<html><head><meta http-equiv="Co
- 一. MovingAverage权值滑动平均更新1.1 示例代码：def create_target_q_network(self,stat
在Numpy中NaN值一般出现在数据清洗前，出现这个值说明这个数据是缺失的在有些时候我们会选择直接删除这些数据，但有些时候这些数据是不能删除- 这篇文章主要介绍了基于python实现文件加密功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 前言安全性是所有数据库管理系统的一个重要特征。理解安全性问题是理解数据库管理系统安全性机制的前提。最近和同事在做数据库权限清理的事情，主要是
- 1、需求用户输入当前目录下任意文件名，程序完成对该文件的备份功能。备份文件名为xx[备份]后缀，例如：test[备份].txt。2、步骤接收
- 昨天遇到了一个奇怪的问题，在Python中需要传递dict参数，利用json.dumps将dict转为json格式用post方法发起请求：p
- 环境使用Python 3.8–> 解释器 <执行python代码>Pycharm–
- DDPDistributed Data Parallel 简称 DDP，是 PyTorch 框架下一种适用于单机多卡、多机多卡任务的数据并行
- 一、实现创建文件夹和日志#!/usr/bin/env python# -*- coding:utf-8 -*-# Author: nulig
- 解决中文乱码问题项目地址 github: https://github.com/Delgan/loguru文档：https://loguru
- 一个拖动层和Onmouse自动下拉效果，IE支持，不支持ff。下面所示的效果四个小块可以拖动到页面任意点，大黑块可以连同四个小块随动。<
- kali添加开机自启采用systemd的方法，kali默认是没有rc.local的，需要自己创建。本方法也适用于ubuntu 18.04 6
- 前言有的时候上游传过来的字段是string类型的，但是我们却想用变成数字来使用。 本来用一个json:",string"
- 译者newstart写的简介：Ross Dawson所在的Future Exploration Network于2007年5月发布的web2
- 1.var、let、const简介 ECMAS
- vue.js 教程Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向
- 前言在MySQL中跨库查询主要分为两种情况，一种是同服务的跨库查询；另一种是不同服务的跨库查询；它们进行跨库查询是不同的，下面就具体介绍这两
- 本文实例讲述了微信小程序学习笔记之文件上传、下载操作。分享给大家供大家参考，具体如下：前面介绍了微信小程序登录API与获取用户信息操作。这里
