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

syoya 发布于2019-08-23 12:53 / 3156人阅读

摘要：跟传统的页面可以在每个页面分别设置填写对应的页面是单页面应用项目想设置页面对应的就不能跟传统方式一样了。

跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了。

首先，找到之前配置好的路由文件，在对应页面路由中添加如下配置即可：
meta: {

   title: "我是页面title"
 }

然后再main.js中的路由钩子函数router.beforeEach添加

if (to.meta.title) {

   document.title = to.meta.title
 }

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

   keepAlive: true
 }

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

/启用页面缓存/

/页面不缓存/

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

即可

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99076.html

前端面试--vue

摘要：注意重点是获取更新后的就是在开发过程中有个需求是需要在阶段操作数据更新后的节点这时候就需要用到就是用来知道什么时候更新完成原因在钩子函数执行的时候其实并未进行任何渲染，而此时进行操作无异于徒劳，所以在中一定要将操作的代码放进的回调函数中。 1. 最简单的vue el: dom节点 data: 数据 Vue 测试实例 - 菜鸟教程(runoob.com) ...

coordinate35 2019-08-26 13:45 评论0 收藏0
Vue动态组件和异步组件

摘要：动态组件如果我们打算在一个地方根据不同的状态引用不同的组件的话，比如页，那么给我们提供动态组件。实现动态组件的加载。的值可以是一个已经注册的组件的名字或者一个组件的选对象。动态组件如果我们打算在一个地方根据不同的状态引用不同的组件的话，比如tab页，那么Vue给我们提供动态组件。基本使用 Parent.vue {{btn.name}} ...

nanchen2251 2019-08-23 14:57 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0