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. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-2.快速搭建SpringBoot项目,采用IDEA

    笔记 2.快速搭建SpringBoot项目,采用IDEA     简介:使用SpringBoot start在线生成项目基本框架并导入到IDEA中 参考资料:         IDEA使用文档    ...

  2. 从源码学习使用 node-delegates

    node-delegates 是 TJ 大神所写的一个简单的小工具,源码只有 157 行,作用在于将外部对象接受到的操作委托到内部属性进行处理,也可以理解为讲对象的内部属性暴露到外部,简化我们所需要书 ...

  3. ssm整合的spring.xml文件配置(applicationContext.xml)

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  4. MBProgressHUD长时间加载无法取消的解决方法

    使用MBProgressHUD时,加载网路数据,或者等待webview加载完毕,长时间的等待导致体验不佳,这时候希望点击屏幕取消加载动画效果: // MBProgressHUD.h @protocol ...

  5. 说说mysql的存储引擎,有什么区别?索引的介绍

    InnoDB 支持ACID事务,支持事务的四种隔离级别,串行化,可重复读,读已提交,读未提交. 支持行级锁以及外检约束:所以可以支持写并发. 不存储总行数. 逐渐索引采用聚集索引,索引的数据域存储数据 ...

  6. 逆序对 -- cogs1438 火柴排队

    题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vimiQkqjU [题目描述] 样例一输入: 4 2 3 1 4 3 2 1 4 样例二 ...

  7. Log4j2配置之Appender详解

    Log4j2配置之Appender详解 Appender负责将日志事件传递到其目标.每个Appender都必须实现Appender接口.大多数Appender将扩展AbstractAppender,它 ...

  8. Netty怎么切换三种I/O模式和源码解释

    参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! 三种I/O模式 BIO:Block I/O,即同步并阻塞的IO:BI ...

  9. P1373 小a和uim之大逃离(DP)

    (点击此处查看原题) 题意 中文题,题意看题面吧. 解题思路 注意到我们只能向右和下移动,由此想到开二维的dp数组dp[i][j],代表当前所在位置 我们需要让两人取数的差值为0,由于起点和走法的不同 ...

  10. 今天测试大商创,遇到了 upstream sent too big header while reading response header from upstream

    今天在测试大商创后台系统时,打开店铺结算,查看店铺对应的订单列表时,该列表自动跳转到502,查看线上和测试环境都能正常打开,唯独我的电脑上打开是502, 查询nginx的error.log日志,记录了 ...