VUE路由防卫功能举例

路由防卫的功能在前端应用比较广泛，主要用于前端页面与页面之间的跳转限制，也可以称之为权限控制，我们接下来使用登录页面与主页面使用路由防卫功能。

路由防卫分为全局防卫、路由独享的守卫、组件守卫。全局防卫是基于所有的页面全部防卫，组件守卫会导致耦合性增加，所有推荐使用路由独享守卫。

没有使用守卫时的代码

主页面路由信息：
const routes = [
{
path:"/",
name:"公安系统",
component:Index
},登录页面路由信息：{
path:"/login",
name:"login",
component:login},
]

实现主页面的跳转的前置页面只能是登录页面功能

修改后的代码：

主页面路由信息：
const routes = [
{
path:"/",
name:"公安系统",
component:Index，beforeEnter:(to,from,next)=>
{if(from.path==='/login'){next();}else{next({path:'/login'})console.log('请登录！');}},登录页面路由信息：{
path:"/login",
name:"login",
component:login},
]

beforeEnter:(to,from,next)=>主函数

VUE路由防卫功能举例相关推荐

vue vue-router实现路由拦截功能
vue vue-router实现路由拦截功能 1.目录结构 2.设置路由拦截. 路由配置如下,在这里自定义了一个对象的参数meta: {authRequired: true}来标记哪些路由是需要登录验 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
vue暂存功能_vue路由缓存的几种实现方式小结
本文实例讲述了vue路由缓存的几种实现方式.分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的. 下面就简单介绍几种 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
【Vue路由（router）进一步详解】
Vue路由(router)进一步详解 query属性具体实例代码如下: params属性具体实例代码如下: props属性 replace属性编程式路由导航路由缓存具体代码: 总结本篇文章 ...
vue 一个页面多个router-view如何配置子路由_前端开发：如何安装配置Vue路由？
大家好,我来了!本期为大家带来的Web前端学习知识是"前端开发:如何安装配置Vue路由?",喜欢Web前端的小伙伴,一起看看吧! Vue Router 是 Vue.js 官方的路由 ...
redirect路由配置 vue_Web前端：Vue路由进阶配置
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:Vue路由进阶配置",有兴趣做前端的朋友,和我一起来看看吧! 1. 页面打开权限流程页面是否能打开有以下两点判断: 1 ...
vue路由匹配实现包容性_包容性设计：面向老年用户的数字平等
vue路由匹配实现包容性 In Covid world, a lot of older users are getting online for the first time or using tec ...
vue 路由知识点梳理及应用场景整理
最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理说实话,路由我一直也就 ...

VUE路由防卫功能举例

VUE路由防卫功能举例

VUE路由防卫功能举例相关推荐

最新文章

热门文章