zoukankan      html  css  js  c++  java
  • 组件内的导航守卫

    beforeRouteEnter 是组件内的路由导航守卫,在确认渲染该组件的对应路由前调用。该守卫不能访问 this,但我们通过传一个回调给 next,就可以使用上面的 vm 来访问组件实例。守卫的参数说明如下:

    • to:即将要进入的目标路由;
    • from:当前导航正要离开的路由,from.name 是路由的名称,对应路由配置中的 name
    • next:一个用来 resolve 当前钩子的方法,需要调用该方法来确认或者中断导航;

    参数 to 和 from 都是 路由对象 (route object),表示当前激活的路由的状态信息,其常用的属性有:

    name:路由的名称,如 'Register'
    path:路由的路径,如 '/auth/register'
    params:路由参数对象,如 { id: "1" }
    query:URL 查询参数对象,如 { page: "1" }
    meta:元信息对象,如 { auth: true }

     1 // 组件内的路由导航守卫
     2 beforeRouteEnter(to, from, next) {
     3   // 路由的名称,对应路由配置中的 name
     4   const fromName = from.name
     5 
     6   // 确认导航
     7   next(vm => {
     8     // 通过 vm 参数访问组件实例,已登录时,评估路由名称
     9     if (vm.$store.state.auth) {
    10       switch (fromName) {
    11         // 如果从注册页面跳转过来
    12         case 'Register':
    13           // 显示注册成功
    14           vm.showMsg('注册成功')
    15           break
    16       }
    17     }
    18   })
    19 }
  • 相关阅读:
    程序员的基本修养之二
    jQuery学习之二
    面向对象程序的设计模式
    Mysql的复杂语句
    养成良好的做事风格
    前端模板学习bootstrap
    23. Merge k Sorted Lists
    953. Verifying an Alien Dictionary
    Daily Coding Problem: Problem #541
    396. Rotate Function
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9309849.html
Copyright © 2011-2022 走看看