zoukankan      html  css  js  c++  java
  • 导航钩子有哪几种,如何将数据传入下一个点击的路由页面

    1.全局导航守卫

    //前置钩子
    router.beforeEach((to,from,next)=>{
      //do something
    })
    //后置钩子(没有next参数)
    router.afterEach((to, from)=>{
      // do something
    })

    2.路由独享守卫

    const router = new VueRouter({
      routes: [
        {
          path: '/file',
          component: File,
          beforeEnter: (to, from, next)=>{
            //do something
          } 
        }
      ]
    })

    3.组件内的导航钩子

    组件内的导航钩子主要有三种,beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。它们是直接在路由组件内部直接进行定义的

    data(){
     return{
       pro:'产品'
     }
    },
    beforeRouteEnter:(to,from,next)=>{
      console.log(to)
      next(vm => {
       console.log(vm.pro)
      })
    }

    注意:beforeRouteEnter不能获取组件实例this,因为当守卫执行前,组件实例还没被创建出来,我们可以通过给next传入一个回调来访问组件实例,在导航被确认时,会执行这个回调,这时就可以访问组件实例了。

    仅仅是beforeRouterEnter支持给next传递回调,其他两个并不支持,因为剩下两个钩子可以正常获取组件实例this。

    4.params和query

    params传参

    this.$router.push({
      name: 'detail',
      params: {
        name: 'xiaoming'
      }  
    });
    //接收
    this.$route.params.name

    query

    this.$router.push({
      path: '/detail',
      query:{
        name: 'xiaoming'
      }
    });
    //接收
    this.$route.query.id

    query和params的区别

    params只能用name来引入路由,query既可以用name又可以用path(通常是path)

    params类似于post方法,参数不会在地址栏中显示

    query类似于get,页面跳转的时候,可以在地址栏看到参数

    补充:

    router为VueRouter实例,想要导航到不同url,则使用router.push方法

    $route为当前router跳转对象,在里边获取name,path,query,params等数据

  • 相关阅读:
    const变量指针赋值给非const类型的指针运行结果
    嵌套结构可以访问外部结构的私有成员吗?
    几种cms的介绍
    中国互联网网站尴尬排行榜[转]
    如何跨域来同步不同网站之间的Cookie
    CMS整站程序整理
    vs 设置断点
    ASP.NET 4中的SEO改进
    VSS演示
    发生一个未处理的异常 脚本调试 错误号2912
  • 原文地址:https://www.cnblogs.com/zmyxixihaha/p/12422020.html
Copyright © 2011-2022 走看看