zoukankan      html  css  js  c++  java
  • react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html

    8、vue怎么通过路由传参?

      a、通配符传参数

    复制代码
    //在定义路由的时候
    
    {
         path: '/describe/:id',
         name: 'Describe',
         component: Describe
    }
    
    //在使用的时候
    
    this.$router.push({
           path: `/describe/${id}`,
    })
    
    //接收页面获取值
    
    this.$route.params.id
    复制代码

      b、params传参,跳转的时候不会显示在url上

    复制代码
    //在定义路由的时候
    
    {
         path: '/describe',
         name: 'Describe',
         component: Describe
    }
    
    //在使用的时候
    
    this.$router.push({
          name: 'Describe',
          params: {
                id: id
          }
    })
    
    //接收页面获取值
    
    this.$route.params.id
    复制代码

      c、query传参,传餐的时候在url显示? key=value & key=value

    复制代码
    //在定义路由的时候
    
       {
         path: '/describe',
         name: 'Describe',
         component: Describe
       }
    
    //在使用的时候
    
     this.$router.push({
              path: '/describe',
              query: {
                id: id
              }
     })
    
    //接收页面获取值
    this.$route.query.id
    复制代码
  • 相关阅读:
    敏捷软件开发实践-Code Review Process(转)
    随笔1
    随笔
    随笔
    低级错误
    随笔
    随笔2
    随笔
    这以前写的代码
    蛋疼的vs
  • 原文地址:https://www.cnblogs.com/yangyangxxb/p/10074800.html
Copyright © 2011-2022 走看看