zoukankan      html  css  js  c++  java
  • 路由导航钩子

    作用:拦截导航,完成跳转或取消。

    三种方式:

    1、全局导航钩子

    2、单个路由独享

    3、组件内导航钩子

     

    1、全局导航钩子:
    //全局前置守卫
    var router=new VueRouter({...});
    
    router.beforeEach((to,from,next)=>{
    
    ​    //to  目标route
    //from 要离开的route
    // next() 进入到to路由
    // next(false) 中断,不进入to,重置回from
    // next('/')==next({path:'/'}), 中断当前,跳转到/
    // next(error) ,被终止的同时,抛出错误
    
    });
    
    //全局后置钩子
    router.afterEach((to,from)=>{
        
    })
    2.单个路由独享钩子
    var router=new VueRouter({
        routes:[{
            path:'',
            component:'',
            beforeEnter:(to,from,next)=>{
                //针对某个路由的导航钩子,用法和全局钩子一样
            }
        }]
    });
    3、组件内导航钩子
    beforeRouteEnter(to,from,next){
        //此时组件实例还没被创建,不能获取this
        next(vm => {
        // 通过 `vm` 访问组件实例
      })
    }
    beforeRouteUpdate(to,from,next){
        //此时可以访问this
        //在路由改变,但是该路由被复用时调用
        // /foo/1 和 /foo/2 之间跳转的时候,/foo组件会被复用,但是此时可以获取到id 1和2
    }
    
     beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
  • 相关阅读:
    12.链式法则
    11.感知机
    10.1激活函数及其梯度(softmax求梯度)
    10.损失函数及其梯度(均方差梯度[使用线性函数y=w*x+b作为激活函数])
    9:常见函数以及激活函数的梯度
    8:梯度
    小程序 scroll-view
    小程序swiper
    view 标签
    微信小程序 tab选项卡
  • 原文地址:https://www.cnblogs.com/annie211/p/12666164.html
Copyright © 2011-2022 走看看