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: {  // 路由元数据
			title: '列表'
			...   // 可自定义配置参数
		}
	}]
});
// 前置：在路由切换之前调用
router.beforeEach((to, from, next) => {});
// 后置：在路由切换成功之后调用
router.afterEach((to, from) => {});
export default router;

说明

① router.beforeEach()是全局前置路由守卫

② router.afterEach()是全局后置路由守卫

③ to：目的地路由信息

④ from: 出发地路由信息

⑤ next：是个函数，只有调用next()，路由器才可继续跳转，不调用直接拦截

⑥ routes中的meta配置项，可配置一些自定义的参数

独享路由守卫

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '@/pages/List';
import Detail from '@/pages/Detail';
Vue.use(VueRouter);
export default new VueRouter({
	routes: [{
		path: '/list',
		component: List,
		children: [{
			path: 'detail',
			component: Detail,
			// Detail组件独享此路由守卫
			beforeEnter: (to, from, next) => {}
		}]
	}]
});

说明

① 组件内部的beforeEnter()是独享前置路由守卫

② 独享路由守卫只有前置没有后置

③ 独享路由守卫与全局路由守卫可一起搭配使用

组件内路由守卫

Detail组件

<template>
	<div></div>
</template>
<script>
export default {
	name: 'Detail',
	// 通过路由，进入组件之前调用
	beforeRouteEnter(to, from, next) {},
	// 通过路由，离开组件之前调用
	beforeRouteLeave(to, from, next) {}
}
</script>

说明

① beforeRouteEnter()，通过路由，进入组件之前被调用

② beforeRouteLeave()，通过路由，离开组件之前被调用

③ 两者都需要调用next()放行

到此这篇关于Vue Router路由守卫超详细介绍的文章就介绍到这了,更多相关Vue Router路由守卫内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue路由守卫,限制前端页面访问权限的例子

    今天给大家写一篇关于vue校验登录状态,如果是非法登录就跳转到登录页面的逻辑 首先需要写一个路由守卫,它的原理是每次路由发生变化时触发具体写法如下: router.beforeEach((to, from, next) => { next() }) beforeEach函数有三个参数: to:即将进入的路由对象 from:当前导航即将离开的路由 next,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的):否则为false,终止导航. 使用案例 限制登陆功能,具

  • Vue路由守卫及页面登录权限控制的设置方法(两种)

    ①先在我们的登录页面存储一个登录数据 // 登录成功时保存一个登录状态: sessionStorage.setItem("flag", 1); ② 添加路由守卫 方法一: 直接在路由中添加 const router = new VueRouter({ ... }) // 路由守卫 router.beforeEach((to, from, next) => { // ... }) 方法二:当我们使用的是export default 方法时可以在main.js中添加 router.b

  • vue路由守卫及路由守卫无限循环问题详析

    先贴一波官方文档的内容 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中. 每个守卫方法接收三个参数: to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用

  • Vue路由守卫之路由独享守卫

    路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的:你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的. const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ...

  • vue路由守卫+登录态管理实例分析

    本文实例讲述了vue路由守卫+登录态管理.分享给大家供大家参考,具体如下: 在路由文件需要守卫的path后面加上meta {path: '/home',component: home,meta:{requireAuth:true}} 在main.js里面加上 //路由守卫 router.beforeEach((to, from, next) => { console.log(to); console.log(from); if (to.meta.requireAuth) { // 判断该路由是否

  • 详解Vue中的路由与多种守卫

    目录 什么是路由呢? 什么是路由守卫呢? 1.vue-router 2.什么是路由 路由分类 3.路由的基本使用 4.多级路由 5.路由传参 1.params 2.路由的props配置 3.<router -link>的replace属性 4.编程式路由导航 5.缓存路由组件 6.路由守卫 1.全局守卫 2.独享路由守卫 3.组件内守卫 4.路由器的两种工作模式 写在最后 什么是路由呢? 路由其实是一种映射关系. 生活中的路由:设备和ip的映射关系: node.js路由:接口和服务的 映射关系

  • Vue路由守卫案例代码

    目录 Vue路由守卫 全局路由守卫 全局前置守卫 全局后置守卫 实例代码: 独享守卫 组件内守卫 总结 Vue路由守卫 路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制. 在Vue中,路由守卫分为三种:全局路由守卫.独享路由守卫以及组件内路由守卫 全局路由守

  • 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 路由守卫详解

    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路由hash模式与history模式详细介绍

    Vue Router路由hash模式与history模式详细介绍

    目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认是hash模式. hash模式: 创建路由实例时,添加mode:"history"属性,即可使用history模式. const router = new VueRouter({ routes, mode: "history" }) history模式: 二.hash模

  • Vue路由传参详细介绍

    Vue路由传参详细介绍

    目录 路由传参 效果展示 params的类型(后附源码) ​​​​​​query参数的类型 路由name 路由传参 效果展示 通过传参,可以让Persons路由组建中的内容,在新的路由组件Show显示出来,Show路由组件要嵌套到Persons路由组件中 Persons路组件中的内容 params的类型(后附源码) path:‘show/:id/:realname’ :id/:realname,是为传参所声明的,props:true 可以理解成可以传参,这只是其中的一种方法,也是个人觉得最简单理

  • Vue路由配置方法详细介绍

    Vue路由配置方法详细介绍

    目录 手动配置Vue-router环境 组件内部跳转路由与传参useRouter,useRoute 手动配置Vue-router环境 1.下载包: npm i vue-router --save或者 npm i vue-router --S 或者用cdn引入 2.创建路由的js文件(路由.子路由.重定向.开启history模式) createRouter.createWebHistory //路由文件 import { createRouter, createWebHistory } from

  • Vue计算属性与侦听器和过滤器超详细介绍

    Vue计算属性与侦听器和过滤器超详细介绍

    目录 1. 计算属性 1.1 使用方法 1.2 案例-购物车合计使用计算属性 2. 侦听器 3. 过滤器 1. 计算属性 1.1 使用方法 概述: 模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板变得简洁易于维护.计算属性是基于它们的响应式依赖进行缓存的,计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化. 计算属性定义在Vue对象中,通过关键词computed属性对象中定义一个个函数,并返回一个值

  • Vue3实战学习配置使用vue router路由步骤示例

    Vue3实战学习配置使用vue router路由步骤示例

    目录 引言 一.目录结构 二.版本依赖 三.配置路由 四.使用路由 引言 随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-router在Vue3中的配置和使用. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ views/ home.vue list.vue ro

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

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

  • Vue中路由守卫的具体使用

    Vue中路由守卫的具体使用

    目录 1.全局守卫 1.1 全局前置守卫 1.2 全局后置路由守卫 1.3 整合 2. 路由独享的守卫 3.组件内的守卫 作用:对路由进行权限控制 分类:全局守卫.独享守卫.组件内守卫 1.全局守卫 1.1 全局前置守卫 顾名思义,前置守卫主要是在你进行路由跳转之前根据你的状态去 进行一系列操作(全局前置是为在路由初始化以及跳转之前都会触发) 你可以使用router.beforeEach注册一个全局前置守卫(Each:每个,即在任意一个路由跳转的时候都会触发) 每个守卫方法接收三个参数: to:

  • 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

随机推荐