Vue router 路由守卫详解

目录
  • 一、全局前置beforeEach
    • 1. 全局前置beforeEach
    • 2. 实现
  • 二、需求二
  • 三、全局后置守卫 afterEach
    • 1. 修改title为自己的title
  • 四、组件内守卫
    • 1. beforeRouteEnter
    • 2. beforeRouteLeave
  • 总结

一、全局前置beforeEach

当 Local Storage 里面存储的 name 是 zhangsan 的时候, 点击消息才显示消息内容

1. 全局前置beforeEach

给router添加一个路由守卫 beforeEach

语法 :

router.beforeEach((to, from, next)=>{})

作用 : 初始化的时候 和 在每一次路由切换之前调用beforeEach里面的函数

参数 :

1.to : 目标路由

2.from : 跳转前的路由

3.next : 放行

2. 实现

二、需求二

如果有很多个路径都需要做出判断以后才跳转, 就需要写很多判断的代码, 判断结构就会很复杂

这时需要判断的路由里面就可以放一个meta标签

meta标签提供关于HTML文档的元数据 (元数据指用来描述数据的数据)

这时就可以使用meta里面的标记字段进行判断

三、全局后置守卫 afterEach

afterEach 和 beforeEach 使用方法基本一致.

区别就是afterEach没有next这个参数

1. 修改title为自己的title

给每个路由指定自己的title名称

const router = new VueRouter({
  routes: [
    {
      name: 'home',
      path: '/home',
      component: Home,
      meta: {
        title: "首页"
      },
      children: [
        {
          name: "xiaoxi",
          path: 'message',
          component: Message,
          meta: {
            title: "消息"
          },
          children: [
            {
              name: 'xiangqing',
              path: 'detail',
              component: Detail,
              meta: {
                isAuth: true,
                title: "消息详情"
              }
            }
          ]
        }
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: "关于"
      }
    }
  ]
})

在 beforEach里面修改title名

router.afterEach((to, from) => {
  document.title = to.meta.title || "测试"
})

四、组件内守卫

1. beforeRouteEnter

通过路由规则, 进入该组件时被调用

2. beforeRouteLeave

通过路由规则, 离开该组件时被调用

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • vue-router 实现导航守卫（路由卫士）的实例代码

    导航守卫 导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate

  • vue-router钩子函数实现路由守卫

    vue-router钩子函数实现路由守卫

    概述 何为路由守卫?路由守卫有点类似于ajax的请求拦截器,就是请求发送之前先给你拦截住做一些事情之后再去发送请求,同样这里的路由守卫意思差不多:简单理解为就是你在进路由之前,首先把你拦住,对你进行检查:这是不是有点中学门口的保安?进来之前拦住,有学生证就进,没有学生证就不让进:当然,路由守卫不仅仅只是在你进入之前拦住你,还有其他的钩子函数进行其他操作: vue-router一共给我们提供了三大类钩子函数来实现路由守卫: 1.全局钩子函数(beforeEach.afterEach) 2.路由独享

  • Vue router 路由守卫详解

    Vue router 路由守卫详解

    目录 一.全局前置beforeEach 1. 全局前置beforeEach 2. 实现 二.需求二 三.全局后置守卫 afterEach 1. 修改title为自己的title 四.组件内守卫 1. beforeRouteEnter 2. beforeRouteLeave 总结 一.全局前置beforeEach 当 Local Storage 里面存储的 name 是 zhangsan 的时候, 点击消息才显示消息内容 1. 全局前置beforeEach 给router添加一个路由守卫 befo

  • Vue Router应用方法详解

    目录 服务端路由 路由的应用场景 路由 监听浏览器 hashchange 事件实现路由 使用Vue Router+Vue2实现路由 服务端路由 服务端路由时指的是服务器根据用户访问的 URL 路径返回不同的响应结果. 在传统的服务端渲染的 web 应用中点击一个链接时,浏览器会从服务端获得全新的 HTML页面,然后重新加载整个页面. 然而,在单页面应用中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,无需重新加载的情况下更新当前页面. 这样通常可以带来更顺滑的用户体验

  • Vue Router路由守卫超详细介绍

    目录 全局前置&后置路由守卫 独享路由守卫 组件内路由守卫 全局前置&后置路由守卫 router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import List from '@/pages/List' Vue.use(VueRouter); const router = new VueRouter({ routes: [{ path: '/list', component: List, meta

  • vue router导航守卫（router.beforeEach()）的使用详解

    导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫.) 好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了

  • nodejs express路由匹配控制及Router模块化使用详解

    目录 路由控制匹配 Router模块化路由 使用方式 对比app上的路由 总结 路由控制匹配 本文主要分析下express的核心功能路由的使用. express路由的匹配规则: 支持模糊匹配,同一个路由可能命中多个定义的路由 router.get("/user/*",(req,res,next)=>{ console.log("====demo====") }) router.get("/user/list",(req,res,next)=

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • react-router-domV6嵌套路由实现详解

    目录 V6新特性 <Route>的属性变更component/render->element <Link/>使用变动 <Redirect/> 替换为 <Navigate/> <Switch/> 重命名为 <Routes/> 用useNavigate代替useHistory 依赖包大小从20kb减少到8kb,整体体积减少 新钩子useRoutes代替react-router-config 新标签:<Outlet/> V

  • vue组件与复用详解

    一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ

  • vue 利用路由守卫判断是否登录的方法

    1.在router下的index.js 路由文件下,引入相关需要文件: import Vue from 'vue' import Router from 'vue-router' import {LOGIN} from '../common/js/islogin' import HelloWorld from '@/components/HelloWorld' import Login from '@/page/Login' import Index from '@/page/index/ind

  • 基于gin的golang web开发：路由示例详解

    Gin是一个用Golang编写的HTTP网络框架.它的特点是类似于Martini的API,性能更好.在golang web开发领域是一个非常热门的web框架. 启动一个Gin web服务器 使用下面的命令安装Gin go get -u github.com/gin-gonic/gin 在代码里添加依赖 import "github.com/gin-gonic/gin" 快速启动一个Gin服务器的代码如下 package main import "github.com/gin-

随机推荐