vue三种传参方式

最新推荐文章于 2024-07-25 18:15:00 发布

weixin_34149796

最新推荐文章于 2024-07-25 18:15:00 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ly-qingqiu/p/11009281.html

本文详细介绍了在Vue.js中如何通过不同方式在路由间传递参数，包括通过路由name接收参数、通过router-link的to属性使用params传递参数、通过URL传参以及使用path匹配并以query形式传递参数的方法。

<p @click="btn(id)"></p>

第一种：通过路由中的name属性来确定匹配的路由（实际开发中不推荐）

　　子组件通过$route.name接收参数

   {
      path: '/news',
      name: 'News',
      component:News
    },

　　子组件接收：

<p>{{$route.name}}</p>

　　第二种：通过router-link中的to属性

　　对应路由配置：

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

　　通过路由中的name属性来确定匹配的路由，通过params来传递参数(params是一个对象，里面是key:value的形式)：

<router-link :to="{name:'Describe',params:{username:'name',id:'id'}}">goHome</router-link> |

　　子组件接收：

this.$route.params.username

this.$route.params.id
 或者插值形式直接展示在页面 <p>{{$route.params.username}}-{{$route.params.id}}</p>

第二种：通过url传参

  {
     path: '/describe:/newsID(\\d+)/:newsTitle',          这里的正则是为了限制id只能传递数字
     name: 'Describe',
     component: Describe
   }

　　路由参数：

<router-link to="/describe/19/hi"></router-link>

　　子组件接受参数($route.params)：

<p>{{$route.params.newsId}}-{{$route.params.newsTitle}}</p>

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

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

　　对应路由配置：

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

　　子组件接收参数：

this.$route.query.id

转载于:https://www.cnblogs.com/ly-qingqiu/p/11009281.html