路由props解析传递参数

1.跳转参数：

  this.$router.push({name:'Search',params:{keyword:this.keyword||undefined},query:{k:'我是k'}})

 

　除了把query参数加在params后面,也可以 location.query=this.$route.query;单独设置query参数

2.路由配置：

    {

        path: '/search',

        name: 'Search',

        component: () =>

            import ('../views/search/index.vue'),

        // props:{a:1,b:2}

        //函数写法 可以将params参数 和query参数 通过props传递给路由组件

        props:($route)=> ({keyword:$route.params.keyword,k:$route.query.k})

    },

 

3.页面使用：

　　

<template>

  <div>

      <h1>我是搜索</h1>

      <h1>{{keyword}}--{{k}}</h1>

  </div>

</template>

<script>

export default {

    name:'Search',

    props:['keyword','k']

}

</script>