vue路由传参的方式

一、 router-link路由导航

父组件： 使用<router-link to = "/跳转路径/传入的参数"></router-link>

例如： <router-link to="/a/123">routerlink传参</router-link>

子组件： this.$route.params.num接收父组件传递过来的参数

mounted () {
  this.num = this.$route.params.num
}

路由配置： {path: '/a/:num', name: A, component: A}

地址栏中的显示： http://localhost:8080/#/a/123

二、调用$router.push实现路由传参

父组件： 绑定点击事件，编写跳转代码

<button @click="deliverParams(123)">push传参</button>
 methods: {
   deliverParams (id) {
     this.$router.push({
       path: `/d/${id}`
     })
   }
 }

子组件： this.$route.params.id接收父组件传递过来的参数

mounted () {
this.id = this.$route.params.id
}

路由配置: {path: '/d/:id', name: D, component: D}

地址栏中的显示: http://localhost:8080/#/d/123

三、通过路由属性中的name匹配路由，再根据params传递参数

父组件： 匹配路由配置好的属性名

<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: 'B',
        params: {
          sometext: '一只羊出没'
        }
      })
    }

子组件：

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.sometext}}</p>
  </div>
</template>

路由配置: 路径后面不需要再加传入的参数，但是name必须和父组件中的name一致

{path: '/b', name: 'B', component: B}

地址栏中的显示: 可以看出地址栏不会带有传入的参数，且再次刷新页面后参数会丢失http://localhost:8080/#/d/123

等等......