router.js

 {
path: '/nav',
component: () => import('../view/nav.vue'),
meta:{
title:'nav',
}
},
{
path: '/haha',
component: () => import('../view/haha.vue'),
meta:{
title:'haha'
}
}

main.js中

router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面meta */
if(to.meta.content){
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
meta.content = to.meta.content;
head[].appendChild(meta)
}
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});

ok

喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”

vue-路由动态切换title的更多相关文章

  1. vue路由--动态路由

    前面介绍的路由都是路径和组件一对一映射的 有时候需要多个路径映射到一个组件,这个组件根据参数的不同动态改变,这时候需要用到动态路由 动态路由这样定义路由路径: path: '/foo/:id'--可以 ...

  2. vue 路由动态传参 (多个)

    动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.para ...

  3. vue路由动态加载

    注意:是动态加载不是动态路由 解决的问题: 动态配置菜单栏的路由参数--实现菜单级的权限控制 问题成因: 在vue实例化的时候vuex.vue-router 就需要加载完毕,无法使用异步的方式从服务器 ...

  4. vue路由动态过渡效果

    不多说,直接上代码 import Vue from 'vue' //引入vue import VueRouter from 'vue-router' //引入路由 Vue.use(VueRouter) ...

  5. vue路由-动态路由和嵌套路由

    一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...

  6. vue 如何动态切换组件,使用is进行切换

    日常项目中需要动态去切换组件进行页面展示. 例如:登陆用户是“管理员”或者“普通用户”,需要根据登陆的用户角色切换页面展示的内容.则需要使用 :is 属性进行绑定切换 <template> ...

  7. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

  8. Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

  9. vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)

    登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

随机推荐

  1. 因OpenCV版本不一致所引发的报错

    目录 一 因OpenCV版本不一致所引发的报错 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 因OpenCV版本不一致所引发的报错 今天遇到了一个很有意思的报错. 事情是这样的, 在编译& ...

  2. Android蓝牙开发技术学习总结

    Android开发,提供对蓝牙的通讯栈的支持,允许设别和其他的设备进行无线传输数据.应用程序层通过安卓API来调用蓝牙的相关功能,这些API使程序无线连接到蓝牙设备,并拥有P2P或者多端无线连接的特性 ...

  3. Android 电量优化

    Android系统上App的电量消耗主要由cpu.wakelock.数据传输(流量和wifi).wifi运行.gps.other senior组成,而耗电异常也是由于这几个模块的使用不当. Broad ...

  4. 省份-城市-区域三级联动【struts2 + ajax +非数据库版】

    package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...

  5. ViedoUtil获取视频的缩略图

    package com.jcf.utilsdemo; import android.graphics.Bitmap; import android.media.ThumbnailUtils; publ ...

  6. 谈谈我对证券公司一些部门的理解(前、中、后台)[z]

    [z]https://blog.csdn.net/UniRong/article/details/79289947 文中对各大部门的分析都是从作者多年经历总结出来的有感之谈,尤其是前台的6大部门(经纪 ...

  7. [Kerberos] Kerberos教程(一)

    1 简介 Kerberos协议旨在通过开放和不安全的网络提供可靠的身份验证,其中可能拦截属于它的主机之间的通信.但是,应该知道,如果使用的计算机容易受到攻击,Kerberos不提供任何保证:身份验证服 ...

  8. CentOS 7系统配置上的变化

    http://www.linuxidc.com/Linux/2014-09/107375p4.htm CentOS 7系统配置上的变化解析 ip ss指令替代 ifconfig route arp n ...

  9. [转]Java Jacob操作Excel

    Jacob项目:https://sourceforge.net/projects/jacob-project/ 转自:https://blog.csdn.net/ZY_extreme/article/ ...

  10. 【转】ffluos编译

    FluffOS是在MUDOS基础上更新完成的.进行了许多新功能和bug修复. 针对LPC有很好的兼容性,如果你的MUD运行MUDOS V22+版本,可以很容易运行在fluffos上. 系统环境: Cn ...