Vue路由传递获取参数

通过Vue传递参数可以分为两种方式:

  • params参数
  • query参数

params参数

params参数传递方式分两种:

  • 路由配置参数
  • 使用$router的push编程式添加

路由配置参数

在路由中配置如下:

{
  path: '/user/:id',
  name: 'user',
  component: UserDetail
}

:id为路径里的参数。传递参数:

this.$router.push({path: `/user/${id}`})

router.push添加params参数

路由配置:

{
  path: '/user',
  name: 'user',
  component: UserDetail
}

传递参数

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

这里需要注意的是:这种方式传递参数,push的对象只能是命名的路由。如果push的配置对象使用path,那么params参数会被忽略。

获取参数

不管是在路由配置params参数还是通过router.push()编程式传递参数,这些参数都是可以通过params来获取。

this.$router.params.id

查询参数

查询参数类似于在路径上添加查询字符串:

/user?id=123

传递参数

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

获取参数

使用查询参数传递参数,需要使用router.query来获取参数。

$route.query.id

版权声明:著作权归作者所有。

相关推荐

Kotlin传递函数作为参数的方式

Kotlin传递函数作为参数,可以有:命名参数,位置参数以及在参数列表外,以lamba的形式传递。示例data class Person(val name: String,                &nb

Vue实例里this的使用

要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以及箭头函数里使用的this。这是vue文档里的原话:All lifecycle hooks are called with their 'this' context pointing 

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

Python获取当前时间

datatime模块now()使用datetime.now()获取当前日期和时间>>> import datetime >>> datetime.datetime.now() datetime(2017, 12, 27, 21, 39, 24, 676972) 仅返回日期&

Python获取列表的元素个数

len()为Python的内置函数,它会返回对象里的项目数,这些对象可以是sequence(如string, bytes, tuple, list, range),也可以是collection (如dictionary, set)Python里的列表没有类似于length或size的属性和方法,可以使用len来获取列表的元素个数>&

[译]Vue - 解决Cannot Find Element错误

如果你刚接触Vue,可能会遇到一些不熟悉的错误。实际上,我在创建delimiter app时看到了一个我不太熟悉的错误。例如,你可能在Vue里看到“Cannot find element”的错误。在Google Chrome中,你会在控制台窗口中看到此错误,如下所示:发生这种错误是因为过早实例化Vue。通常情况下,你会看到此错误,是因为挂载Vue的HTML元