VueRouter的编程式导航和导航守卫

2023-12-16 04:20
文章标签 编程 导航 守卫 vuerouter

本文主要是介绍VueRouter的编程式导航和导航守卫,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

编程式导航

Vue Router 提供了编程式导航的方法,这意味着你可以在 JavaScript 中编写代码来导航到不同的路由。这通常在处理用户交互或其他异步操作时很有用。

要实现编程式导航,你可以使用 this.$router.push() 方法。这个方法接受一个路由对象或者一个路由路径字符串作为参数。

// 编程式导航进行页面跳转this.$router.push('/details');//只跳转页面this.$router.push({path:'/details'});//只跳转页面

 1.name params跳转并传参 参数不会携带在地址栏,是一次性数据携带,刷新页面数据丢失
  2.path query跳转并传参 参数会携带再地址栏,刷新页面数据不会丢失 
  3.path params传参是不生效的,name query传参是生效的,模式和path query一样

 //编程式导航传递参数方式****************path params 传递参数不生效1.name params跳转并传参 一次性数据携带 刷新页面数据丢失this.$router.push({name:'Details',params:row})2.path query或者name query 刷新页面数据不丢失this.$router.push({// path:"/details",name:"Details",query:row})

 push方法 replace方法区别?
    push方法跳转的会向浏览器添加一条新的历史记录
    replace方法跳转不会向浏览器添加历史记录

//replace方法进行页面跳转并传参this.$router.replace({path:'/details',query:row})

路由模式?

hash history 区别?
  1.hash模式在地址栏上会携带#,history模式url正常。
  2.hash模式回车刷新会重新载入路由,history回车刷新会请求服务器,一般报错,需要后端支持。
  3.hash模式原理利用hashchange中事件对象中newURL,oldURL之类属性
  4.history利用history对象中api,h5新增pushState,replaceState,go,back,forward
  5.hash支持低版本浏览器,history模式利用h5新增API

导航守卫

全局守卫

全局前置守卫

router.beforeEach((to,from,next)=>{
        路由拦截 ---用户身份验证
        if(to.path!='login' && ){
          next('/login') 
        }else{
          next()
        }
      })

全局后置守卫

router.afterEach((to,from)=>{
        
      })

路由独享守卫

进入到该路由触发 做路由拦截
    beforeEnter(to,from,next){
      if(from.path!='/myA'){
        next(false)
      }else{
        next()
      }
    }

组件内导航守卫

// 路由改变进入组件的时候触发---进入该路由对应的组件beforeRouteEnter(to, from, next) {console.log(this, to, from, next, 'beforeRouteEnter', 'this指向window全局对象');next();},// 路由改变 该组件被复用时候触发---更新该路由对应的组件beforeRouteUpdate(to, from, next) {console.log(this, to, from, next, 'beforeRouteUpdate');next();},// 路由改变 离开路由对应组件时候触发--离开该路由对应的组件beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`console.log(this,to,from,'beforeRouteLeave')next();}

这篇关于VueRouter的编程式导航和导航守卫的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/499079

相关文章

揭秘Python Socket网络编程的7种硬核用法

《揭秘PythonSocket网络编程的7种硬核用法》Socket不仅能做聊天室,还能干一大堆硬核操作,这篇文章就带大家看看Python网络编程的7种超实用玩法,感兴趣的小伙伴可以跟随小编一起... 目录1.端口扫描器:探测开放端口2.简易 HTTP 服务器:10 秒搭个网页3.局域网游戏:多人联机对战4.

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.

Python异步编程中asyncio.gather的并发控制详解

《Python异步编程中asyncio.gather的并发控制详解》在Python异步编程生态中,asyncio.gather是并发任务调度的核心工具,本文将通过实际场景和代码示例,展示如何结合信号量... 目录一、asyncio.gather的原始行为解析二、信号量控制法:给并发装上"节流阀"三、进阶控制

C#多线程编程中导致死锁的常见陷阱和避免方法

《C#多线程编程中导致死锁的常见陷阱和避免方法》在C#多线程编程中,死锁(Deadlock)是一种常见的、令人头疼的错误,死锁通常发生在多个线程试图获取多个资源的锁时,导致相互等待对方释放资源,最终形... 目录引言1. 什么是死锁?死锁的典型条件:2. 导致死锁的常见原因2.1 锁的顺序问题错误示例:不同

PyCharm接入DeepSeek实现AI编程的操作流程

《PyCharm接入DeepSeek实现AI编程的操作流程》DeepSeek是一家专注于人工智能技术研发的公司,致力于开发高性能、低成本的AI模型,接下来,我们把DeepSeek接入到PyCharm中... 目录引言效果演示创建API key在PyCharm中下载Continue插件配置Continue引言

C#反射编程之GetConstructor()方法解读

《C#反射编程之GetConstructor()方法解读》C#中Type类的GetConstructor()方法用于获取指定类型的构造函数,该方法有多个重载版本,可以根据不同的参数获取不同特性的构造函... 目录C# GetConstructor()方法有4个重载以GetConstructor(Type[]

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码: 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口,https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

【编程底层思考】垃圾收集机制,GC算法,垃圾收集器类型概述

Java的垃圾收集(Garbage Collection,GC)机制是Java语言的一大特色,它负责自动管理内存的回收,释放不再使用的对象所占用的内存。以下是对Java垃圾收集机制的详细介绍: 一、垃圾收集机制概述: 对象存活判断:垃圾收集器定期检查堆内存中的对象,判断哪些对象是“垃圾”,即不再被任何引用链直接或间接引用的对象。内存回收:将判断为垃圾的对象占用的内存进行回收,以便重新使用。

Go Playground 在线编程环境

For all examples in this and the next chapter, we will use Go Playground. Go Playground represents a web service that can run programs written in Go. It can be opened in a web browser using the follow