宝哥软件园

Title: vue项目动态设置页面标题以及是否缓存页面

编辑:宝哥软件园 来源:互联网 时间:2021-08-28

用传统的页面,可以在每一页设置并填写对应的页面标题,但是,vue是单页应用项目,和传统的设置页面对应标题的方式不一样。

下载

NPM安装vue-微信-标题-保存介绍在mian.js

//从‘vue-微信-title’vue . use(vuewechattile)设置title import vuewechattitle,为路由器的index.js路由添加参数

{path:'/login ',component: login,meta: {title:' login'}}如果是公共组件,可以根据跳转时的条件动态设置标题,可以在最外侧的div上设置v-微信-title=' $ route.meta.title ',然后动态更改标题。

template div class=' hours-con container ' v-微信-title=' $ route.meta.title './div/template//js动态设置,你可以更改标题如果(宗){这个。$ route.meta.title=跳转到页面时的“总课时”。说到给路由添加元配置,另一个常用的是keepAlive,它可以设置页面是否被缓存,如下所示:

Meta: {keepAlive: true},然后设置的路由器视图。vue文件

keep-Aliverrouter-view v-if=' $ route . meta . keepalive '/router-view/keepalive/启用页面缓存/

路由器-查看v-if='!$ route . meta . keepalive '/路由器-视图/页面未缓存/

回到设置页面标题的主题

但是最近做了一个基于vue的nuxt.js的项目,路线是根据项目目录结构自动生成的,没有按照之前的方法工作。经过探索,发现为nuxt.js项目设置标题并不难,只需将其添加到相应的。vue文件。

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

更多资讯
游戏推荐
更多+