美文网首页
路由传参的方式

路由传参的方式

作者: aE_0ff7 | 来源:发表于2020-06-30 14:48 被阅读0次

一:

getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

方案一,需要对应路由配置如下:

  {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

this.$route.params.id 来获取参数

二:

    this.$router.push({
        name: 'Describe',
        params: {
          id: id
        }
      })

对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

this.$route.params.id 来获取参数

三:

    this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
对应路由配置:

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
this.$route.query.id 来获取参数

四:router-link to传参

 <router-link class="tag-add" v-else :to="{path:'/bos/register',query: {id: 1}}">选择标签</router-link>

this.$route.query.id 来获取参数

相关文章

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • 2018-09-25 vue初学十(路由的嵌套及传参)

    1.路由的嵌套 案例 2.路由的传参 传参的两种方式 案例

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

  • vue - 路由带参跳转

    vue路由传参按照传参方式可划分为params传参和query传参; params传参分为在url中显示和影藏参数...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • vue 路由传参的三种方式

    vue路由传参方式 params query vuex + sessionStore

  • 20.路由的基本使用

    1.路由的基本使用: 2.路由规则中传参方式: 方式1: 方式2: 3.路由之间的嵌套:

  • Flutter 路由传参小结

    Flutter路由传参总体来说有两种方式,一种是通过构造函数传参,一种是通过路由参数传参。这两种方式都可以使用自定...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • 微信小程序路由传参

    路由传参常用方式有以下几种 通过url传参// 产品列表页面 详情 // 或者wx.navigateTo({ ...

网友评论

      本文标题:路由传参的方式

      本文链接:https://www.haomeiwen.com/subject/sdlxqktx.html