Vue中组件内导航守卫(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

news/2024/7/9 23:39:43 标签: vue, js, javascript

在组件中使用路由守卫:

javascript">beforeRouteEnter (to, from, next) {
// 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例
    if(userData.status == 0){//userData为接口返回数据。
        next(vm => {
          vm.$message.warning({
            showClose: true,
            message: '不符合条件'
          });
          vm.$router.replace(from.path);//返回之前页面
        })
      }else{
        next(vm => {})
      }
  },

组件内的几个路由守卫使用时机:

javascript">beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
     next(vm => {
          // 通过 `vm` 访问组件实例
     })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

http://www.niftyadmin.cn/n/1527258.html

相关文章

基于java awt包的附带登录的学生管理系统图形用户界面程序

文章目录1.前言2.程序入口3.登录注册页面3.主界面4.添加学生界面5.查找学生界面6.显示学生信息7.删除学生界面(和查找学生界面相似,自己太菜,没提高代码复用率)8.根据序号查找学生(相似界面)9.显示所以学生信息(未完成)10.删除所有学生信息,获取学生人数,退出11.学生类12.学生库…

React中受控组件和非受控组件

一、受控组件 受控组件就是可以被 react 状态控制的组件 在 react 中,Input textarea 等组件默认是非受控组件(输入框内部的值是用户控制,和 React 无关)。但是也可以转化成受控组件,就是通过 onChange 事件获取当前输…

React中高阶函数和函数的柯里化

一、高阶函数: 如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶…

maven安装与配置到idea中

maven安装 在官网下载压缩包,网址: https://maven.apache.org/download.cgi?.解压到一个目录,目录最好不要有中文和空格配置环境变量: 新建一个变量: M2_HOME , 变量值为maven的路径(不带bin目录),在PATH变量中追加值: %M2_HOME%\bin 打开cmd输入 mvn -v出现以下内容安装成功…

Elementui中在表格中插入图片

效果&#xff1a; 插入单张选中放大&#xff1a; <el-table-column label"商品详情"><template slot-scope"scope"><el-popover placement"top-start" title"" trigger"hover"><img :src"scope…

React脚手架public文件介绍

public文件夹下index.js <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><!-- %PUBLIC_URL%代表public文件夹的路径 --><link rel"icon" href"%PUBLIC_URL%/favicon.ico" /><…

Elementui实现面包屑($route.matched)

this.$route.matched匹配到的会是一个数组&#xff0c;包含当前页面之前所有路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。 //demo <template><div class"nav-wrap"><router-link v-for"(item, index) in navList" :key&…

Vue中$router和$route的常用api

一、$router router是VueRouter的一个对象&#xff0c;通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象&#xff0c;这个对象中是一个全局的对象&#xff0c;他包含了所有的路由包含了许多关键的对象和属性。 $router.push // 字符串 this.$router.push…