Javascript

vue中实现页面的拦截、跳转、判断

本文主要是介绍vue中实现页面的拦截、跳转、判断,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1,全局前置守卫:beforeEach

const router =new Router({……});
router.beforeEach((to, from, next) => {
 
});

2,全局后置守卫:afterEach

3,路由独享的钩子函数(路由守卫):beforeEnter

在配置路由的时候直接定义beforeEnter守卫,跳转到这个路由时候才会执行
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

 

4 组件内的钩子函数(组件守卫)
直接写在单个vue文件中的中,写的位置跟mounted之类的钩子函数同级别。参数都是to、from、next

4.1 beforeRouteEnter
作用:在渲染该组件对应的路由被confirm前调用,

注意:这时候该组件的this不能使用,因为组件实例还没被创建。

 

4.2 beforeRouteUpdate
作用:当前路由改变,但是该组件被复用时候调用,举例来说,对于三级导航,一个带有动态参数的路径/index/id,在/index/1和 /index/2之间跳转的时候,由于会渲染同样的index组件,因此该组件会被复用,而这个钩子会就再复用的时候调用。

注意:可以使用组件的实力this

4.3 beforeRouteLeave
作用:导航离开该组件对应的路由时调用

5,单个vue文件中,设置监听

 watch: {
        $route: {
            handler: function(val, oldVal){
                if(oldVal.path== "/map"){
                // this.$refs.tclb.closeDrawer()
                this.drawer=false;
                }
                if(val.path== "/map"){
                    document.getElementById("tclb_container").style.display="block";
                     this.getParams();
                //this.drawer=false;
                }
                
            },
            
            // 深度观察监听
            // deep: true
        },
       // "$route":"getPath" // 监听事件
  },

 

这篇关于vue中实现页面的拦截、跳转、判断的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!