美文网首页VUE相关
vue路由传参,使用props获取参数

vue路由传参,使用props获取参数

作者: 伴歌知行 | 来源:发表于2019-08-01 14:47 被阅读0次

在路由中定义props:
1、在path后添加 /:id ,则id参数存放在route.params中
2、articleTitle参数存放在route.query中

{
      path: '/article/:id',
      component: () => import( /* webpackChunkName: "article" */ "../pages/article"),
      props: (route) => ({
        id: route.params.itemId,
        articleTitle: route.query.draft
      })
}

跳转到article页面时:

this.$router.push({
       path: "/article/" + id,
       query: {
            articleTitle: "文章1"
       }
})

在article页面组件上接收参数:

props: {
   id: String,
   articleTitle: String
}

相关文章

  • vue路由传参,使用props获取参数

    在路由中定义props:1、在path后添加 /:id ,则id参数存放在route.params中2、artic...

  • 几种vue的组件传值方式

    几种vue的组件传值方式 1、路由传参 ①定义路由时加上参数props: true,在定义路由路径时要留有参数占位...

  • 31.vue传参

    1.vue传参 vue传参使用路由传参params,query,或者使用vuex,localStorage,vue...

  • vue组件之间通信

    vue父组件给子组件传参使用props子组件给父组件传参使用时间派发$dispatch兄弟组件之间传递参数使用vuex

  • vue获取url后面的参数

    使用路由获取页面参数 在路由中设置path: 获取参数 备注:1、参数名需要保持一致2、如果路由中没有传参http...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • vue 路由进阶

    路由组件传参 布尔模式 设置props: true 会利用里面的参数使用route.params的作为组件的属性...

  • Vue-Router

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

  • 路由传参 query 和 params

    vue路由传参分为两种情况: 一、query和params传参的区别: 1、query传参显示参数,params传...

  • vue 路由传参--props

    一般处理组件中路由器参数的方式采用$router传值 接受路由参数 但是这样在组件内部使用 $route 会对某个...

网友评论

    本文标题:vue路由传参,使用props获取参数

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