vue-router-全局导航守卫-改变组件时自动更改网页标题

最新推荐文章于 2022-08-23 16:24:28 发布
最新推荐文章于 2022-08-23 16:24:28 发布
阅读量251 收藏
点赞数 1
文章标签： vue vue.js 前端 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asfcyg/article/details/106127794
版权

需求：

在这里插入图片描述当点击首页时，上面显示首页；点击关于时，上面显示关于。

解决方法一：

  1. 这里显示的是title在这里插入图片描述
  2. 生命周期函数
    created(){}当组件被创建时会回调这个生命周期函数
    mounted(){}当template模板相关的东西被挂载到DOM上面时回调这个生命周期函数
    updated(){}在页面发生更新时执行这个生命周期函数
    这里我们只需要使用created(){}
    在这里插入图片描述
  3. 将所有组件都添加上，就可以实现需求在这里插入图片描述

解决方法二：

上面的方法很麻烦，代码复用性不高而且不利于维护，下面是较简便的方法

  1. 在路由映射中定义meta,meta中定义title名称在这里插入图片描述
  2. 使用router中的beforeEach方法（导航钩子），这里的next()一定要写，否则会报错
导航钩子的三个参数解析
to：即将要进入的目标的路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后，才能进入下一个钩子

在这里插入图片描述
3. 可以显示在这里插入图片描述
4. 但是有一个bug，刚进来时会显示undefined 在这里插入图片描述
5. 我们进入首页组件中，打印一下this.$route，可以看到meta为空在这里插入图片描述
6. 我们进入到matched中，进入第一个，可以找到meta: {title: "首页"}在这里插入图片描述
7. 所以说，我们需要改一下在这里插入图片描述
8. 这样就可以了在这里插入图片描述

2401w
关注
vue-router4改变Title(全局导航守卫)
Alistring的博客
05-29 628
router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next() });
vue-router导航守卫全解析
黑山老妖的小站
08-13 595
导航守卫 vue-router实例方法提供了守卫导航的方法，可以将我们的代码逻辑植入到路由导航过程中。主要分为全局、单个路由共享、组件级 全局 router.beforeEach() 作用：导航前置守卫 在路由跳转之前进行判断和拦截，一般用来做一些进入页面的限制，比如未登录不能进入某些页面 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。 参数 to:Route对象，即将要进入的目标 from:Route，当前要离开的路由
切换网页窗口时改变页面title标题
Ying的博客
04-22 1486
主要是window.onblur和window.onfocus var title; // 用于临时存放原来的title内容 window.onblur = function(){ // onblur时先存下原来的title,再更改title内容 title = document.title; document.title = " （╯‵□′）...
【Vue】vuecli导航守卫动态改变标题（title）
Y.Cheng的博客
06-13 1万+
Vue-cli 是快速构建单页应用的脚手架，单页所以只有一个index.html入口，只有一个app实例。 但是我们做的项目中，每个页面的标题描述是不同的，又要改变title，所以这里就需要用到导航守卫了 Vuecli搭建之类的这里就不详述了… 导航守卫： 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由...
vue-router设置页面标题
weixin_30500663的博客
10-17 69
通过vue-router设置页面标题 const router = new Router({ routes: [ { path: '/', name: 'EntryConfirmation', meta: { title: "到岗候选人名单确认" }, component: EntryConfirmation ...
vue项目动态修改页面title
m0_61476911的博客
08-23 1万+
动态修改页面title外加点击跳转重新打开一个新页面并修改title
Vue 技术栈 带你探究 vue-router 源码 手写vue-router
01-08
当使用 `Vue.use(VueRouter)` 时，Vue Router 会添加一些全局 Mixin，使得 Vue 实例可以响应路由变化。例如，`beforeRouteEnter`, `beforeRouteUpdate` 和 `beforeRouteLeave` 等生命周期钩子，这些钩子函数允许我们...
Vue-Router路由系统 vant组件库
m0_66430536的博客
03-03 979
Vue-Router路由系统 Vue路由简介和基础使用 nodejs路由 接口和服务的映射关系 前端路由 路径和组件的映射关系 1. 路由是什么呢? 路由是一种映射关系 2. Vue中的路由是什么? 路径和组件的映射关系 为何使用路由 目标：了解为何使用路由 具体使用示例: 网易云音乐 https://music.163.com/ 单页面应用(SPA): 所有功能在一个html页面上实现 前端路由作用: 实现业务场景切换 优点： ...
浅析vue-router原理
10-17
配置 Vue Router 需要在 Vue 实例中创建一个新的 VueRouter 实例，并提供路由配置，包括定义路由路径、对应的组件、导航守卫等。例如： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' ...
vue-router导航守卫（全局前置守卫、全局后置钩子、路由独享的守卫、组件内的守卫、导航守卫整体流程）
caoxinjian423的博客
10-07 1715
全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。 每个守卫方法接收三个参数： to: 即将要进入的目标 路由对象 from: 当前导航正要离开的.
路由守卫 设置页面标题
m0_63327154的博客
02-10 624
路由里添加meta属性 { path: '/', name: 'Home', component: () => import('../views/Home.vue'), //元数据 meta: { title: '首页', }, }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, }) // 必
使用vue-router设置每个页面的title
热门推荐
马优晨
08-09 5万+
基本环境配置： webpack + vue2.0 + vue-router +nodeJS进入 router 文件夹底下的index.js文件首先引入：import Vue from 'vue' import Router from 'vue-router'然后在路由里面配置每个路由的地址： routes: [ { /* （首页）默认路由地址 */ path:
关于vue中beforeRouteEnter使用的误区
GuoZebin的博客
10-23 2万+
在写项目的时候偶然遇到了一个问题，在进入一个城市选择页面时，城市列表总是需要一秒后才能加载出来，出现了页面抖动，在解决这个问题时想到了路由中的beforeRouteEnter方法，在路由跳转前加载数据，在网上发现有博客说可以使用如下写法来解决这个问题： 这样写是毫无效果的， 经过仔细分析官方文档后发现next中的函数执行在页面mounted之后，所以这种方法时是不正确的。还不如直接将数据获取...
vue 路由发生变化修改页面title
陌桑楚客
09-29 469
在main.js中写 router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next() }) router文件中 export default new Router({ mode: 'history', routes: [{ path: '/', name: 'Index',
Vue项目中动态修改页面标题title
JackieDYH的博客
10-30 1万+
Vue项目中有时候需要修改页面标题title ①如果需要动态设置页面的title，可以直接使用document.title； ②可以使用router的beforeEach去统一设置，这种方法使用每个页面都是固定的标题，在进入路由就赋值标题，进入路由后就不修改了 方法一 使用document.title动态修改页面标题 1、在index.js中设置document.title //设置游览器标题 Vue.directive({ inserted: function(el,bindin
vue中的路由-前置守卫：修改网页标题，后置守卫：设置网页加载状态
晴天有点孤单
04-26 650
// 全局前置守卫 router.beforeEach((to: any, from: any, next: any) => { LoadingBar.start(); // 网页加载状态 console.log(to, from); if (to.meta.title) { document.title = to.meta.title; ...
vue导航栏/公共组件在部分页面显示,在其它页面不显示
weixin_43983711的博客
03-13 2587
需求：结合拖拽的返回首页按钮，让在首页/登陆页不展示出来，其他页面都展示的需求进行开发 1 .router-view结合$route.meta 在app.vue <template> <div id="app"> <div v-if="$route.meta.keepAlive"> <router-view v-wechat-tit...
vue设置公用导航栏
qq_37949984的博客
06-06 8219
我不是天生的王者，但我骨子里流淌着不让我低头的血液。 首先，项目结构如下： 想要让导航栏、侧边栏变为公共页面，则要在App.vue页面中加入。假设已经有了Header.vue和Left.vue，这里就不贴出来了，App.vue代码如下： <template> <div id="app"> <!-- 其他页 --> <el-cont...
详解vue-router 中的导航钩子
Mr. Han
02-26 4万+
vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。 有三种方式可以植入路由导航过程中： 全局的 单个路由独享的 组件级的 1. 全局导航钩子： 全局导航钩子主要有两种钩子：前置守卫、后置钩子， 注册一个全局前置守卫： const router = new VueRouter({ ... }); router.beforeEach((to, from, n...
深入理解vue-router：单页应用的路径管理
vue-router的主要任务是建立URL与组件之间的映射关系，允许开发者通过修改URL来改变应用的状态和展示的内容。在vue-router的帮助下，开发者可以定义路由规则，将特定的URL路径与对应的Vue组件关联，从而实现动态渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值