Vue_Router_守卫

路由守卫:路由进行权限控制。

分为:全局守卫,独享守卫,组件内守卫。

全局守卫

//创建并暴露 路由器
const router=new Vrouter({mode:"hash"//"hash路径出现#但是兼容性强,history没有#兼容性差"routes:[{name:'banji',//命名路由,:to="{name='banji'}"path:'/class',  //当路径是 /class时,内容区就显示ClassPage这个组件。component:ClassPage,//上面的引用meta:{title:'信息'}//{}中自定义信息},{path:'/student',component:StudentPage,children:[//嵌套路由{name:'banji',path:'/class',component:ClassPage,meta:{title:'信息'}}]}]
});
//暴露之前添加守卫//全局的路由前置守卫,处理可否去到目标组件。to,form 都有详细的【去来】信息
router.beforeEach((to,from,next)=>{//to:去哪,//from:从哪来document.title=from.meta.title;//读信息//next()//放行,让不让跳转
})//全局的路由后置守卫,处理到达组件之后的操作
router.afterEach((to,from)=>{//to:去哪,//from:从哪来
})//暴露路由
export default router;

独享守卫

//创建并暴露 路由器
const router=new Vrouter({routes:[{path:'/student',component:StudentPage,children:[//嵌套路由{....}],beforeEnter:(to,from,next)=>{...}//****独享路由守卫,里面与全局一样}]
});
//暴露路由
export default router;

组件内守卫

//组件里面的路由守卫
export default {name:'组件名',data(){return{属性:值}},props:['参数'],//***进入组件时的守卫,通过路由规则进入的,作用有点类似全局守卫。to,form 都有详细的【去来】信息router.beforeEach((to,from,next)=>{//to:去哪,//from:从哪来document.title=from.meta.title;//读信息//next()允许进来})//离开组件时的守卫,处理到达组件之后的操作router.afterEach((to,from,next)=>{//to:去哪,//from:从哪来//next()允许出去})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/441433.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Boosting semantic human matting with coarse annotations

前向推理在modelscope中开源了,但是训练没开源,且是基于TensorFlow的,复现起来是比较麻烦的。 1.Introduction 分割技术主要集中在像素级二元分类,抠图被建模为前景图像F和背景图像B的加权融合,大多数matte方法采用指…

【前端素材】bootstrap3 实现地产置业公司source网页设计

一、需求分析 地产置业公司的网页通常是该公司的官方网站,旨在向访问者提供相关信息和服务。这些网页通常具有以下功能: 公司介绍:网页通常包含有关公司背景、历史、核心价值观和使命等方面的信息。此部分帮助访问者了解公司的身份和目标。 …

音视频数字化(数字与模拟-录音机)

之前我们说了【数字与模拟-照相机】照相机的数字化,今天聊聊录音机。 说录音机之前,必须说说留声机。留声机是爱迪生1877年宣布发明成功的,研发过程相当复杂,但原理是简单的。 声音的本质是“波”,是物体振动产生的。以乐器为例,打击乐就是敲击(鼓、钹、木鱼、木琴、三…

Unity 设置鼠标

前言 本章主要对鼠标图标样式还有鼠标显隐进行设置 图标样式的设置 代码控制 有时候需要有改变鼠标样式的需求可以使用如下代码 Cursor.SetCursor(this.mouseTexture, Vector2.zero, CursorMode.Auto); 传入的要替换的图标偏移量允许您在支持的平台上使用硬件光标&#xff0…

C# 一个快速读取写入操作execl的方法封装

这里封装了3个实用类ExcelDataReaderExtensions,ExcelDataSetConfiguration,ExcelDataTableConfiguration和一个实用代码参考: using ExcelDataReader; using System; using System.Collections.Generic; using System.Linq; using System.T…

【RuoYi-Vue-Plus学习】项目初始化时将sql导入数据库出现Finished with error解决方法之一

将sql导入数据库出现Finished with error,文末是最终解决方法。 问题描述:sql导入出现Finished with error 解决方法探索过程: 1)参考链接2和3,在mysql的bin目录下输入以下指令连接数据库 mysql -h localhost -u ro…

PythonSSTI漏洞

一,python内置PYC反编译: pyc文件,就是python的代码生成的字节码文件,有些类似于Java中的.class文件,pyc文件可以经过本地python解释器进行运行,从而实现跨平台。 也就是说我们得到了.pyc文件,就…

监测Tomcat项目宕机重启脚本(Linux)

1.准备好写好的脚本 #!/bin/sh # 获取tomcat的PID TOMCAT_PID$(ps -ef | grep tomcat | grep -v tomcatMonitor |grep -v grep | awk {print $2}) # tomcat的启动文件位置 START_TOMCAT/mnt/tomcat/bin/startup.sh # 需要监测的一个GET请求地址 MONITOR_URLhttp://localhost:…

移动端基础:rem适配布局

rem单位 rem是相对单位,类似于em 但rem的基准是相对于HTML元素的字体大小 rem的优点是可以通过修改HTML文字大小改变页面元素大小,做到整体控制 媒体查询 使用media查询,可以针对不同的媒体类型定义不同的样式 可以针对不同的屏幕尺寸设…

Unity_Timeline使用说明

Unity_Timeline使用说明 首先要找到工具吧?Unity2023.1.19f1c1打开如下: (团结引擎没找见哪儿打开,可能是引擎问题吧?有知道的同学可以告诉我在哪儿打开) Timelime使用流程: 打开之后会提示您…

android文本显示

目录 一.设置文本的内容 方法一 方法二 二.设置文本的大小 三.设置文本的颜色 创建新的模块 一.设置文本的内容 方法一 方法二 二.设置文本的大小 用快捷方式创建activity 换成线性布局 sp单位的会更具系统字体变大则变大 三.设置文本的颜色 八位十六进制 0xff00ff00 …

深度学习(9)--pydot库和graphviz库安装流程详解

目录 一.pydot库安装 二.graphviz库安装 一.pydot库安装 pydot的安装可直接在编译器安装相关包,以PyCharm举例: 如果搜索可用软件包显示为空,记得在此处把使用Conda软件包管理器”点亮 二.graphviz库安装 点击链接下载安装包graphviz-2.38…