vue路由router传参数方式

params、query是什么？

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params

query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

1 调用this.$router.push实现携带参数的跳转

      this.$router.push({
        path:`/About/${id}`
      })
    // 或者使用路由的name
    this.$router.push({
        name: "About",
        params: {id: id}
    })
//注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
// 你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应 '/about/:id'。使用query方法，就没有这种限制，直接在跳转里面用就可以
// 注意：如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的http请求或者其他操作就会失败。

// 在路由中配置
{
  path: '/about/:id',
  name: 'About',
  component: About
}



// 接收参数
this.$route.params

2 通过query传递参数

this.$router.push({
        name: "About",
        query: {id: id}
    })

// 路由配置
{
  path: '/about',
  name: 'About',
  component: About
}

// 接收参数
this.$route.query

3 router-link传递参数

// 通过query传递
 <router-link tag="div" :to="{path:'/playList',query:{id:item.id}}"></router-link>


//通过router-link在路由上加上query,然后通过query,获取数据
  let id = this.$route.query.id;
//注意：如果router-link的to属性指向本页面，需要在watch中监听路由的变化$route，然后调用函数请求数据，不然页面数据不会主动刷新

props

我们在定义路由规则的时候，可以传递props属性，属性值有两种情况
	第一种：属性值是true
		会将动态路由数据传递给组件
	第二种：属性值是函数
		参数是$route数据对象
		返回值表示给组件传递的数据
我们在组件中，通过props属性去接收这些数据（类似父组件向子组件通信）

    { 
        name: 'list', 
        path: '/list/:page', 
        component: List,
        // 会将动态路由数据传递给组件，只能传递动态数据
        // props: true
        // 传递更多的数据
        props(route) {
            return {
                page: route.params.page,
                path: route.path,
                hash: route.hash,
                color: route.query.color

            }
        }
    },
        
            // 我们在组件中，通过props属性去接收这些数据（类似父组件向子组件通信）
    props: ['page', 'path', 'hash', 'color'],