vue路由传参的三种基本方式

一：

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

方案一，需要对应路由配置如下：

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

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

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

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

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

子组件中: 这样来获取参数

this.$route.params.id

三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

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

对应路由配置：

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

对应子组件: 这样来获取参数

this.$route.query.id

vue路由传参的三种基本方式相关推荐

vue路由传参的三种基本方式 - 流年的樱花逝 - SegmentFault 思否
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
vue路由传参的三种方式区别（params,query）
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 1 <ul class="table_ ...
vue路由传参的三种方式
目录 1.动态路由传参 2.params传参 3.query传参 1.动态路由传参使用"路径参数"使用冒号 : 标记.当匹配到一个路由时,参数值会被设置到 this.$route ...
Vue：路由传参的三种方式
文章目录前言方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
Vue路由传参的几种方式
前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...
vue路由传参的四种方式
vue路由传参一.router-link路由导航父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link> ...

vue路由传参的三种基本方式

一：

二：

三：

vue路由传参的三种基本方式相关推荐

最新文章

热门文章