vue路由三种传参方式详细讲解

//子组件
    {
        path: '/Search/:keyword',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true }
    }

//父路由组件
<router-link :to="/Search/123">进入搜索页面</router-link>

//父路由编程式传参(一般通过事件触发)
this.$router.push({
    path:'/Search/${keyword}',
})

//父路由编程式传参
 this.$router.push({
      name: "Search",
      params: { keyword: this.keyword },//这种方式的传参必须要有路由的别名name
   });

{
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true }
    }

 this.$router.push({
        name: "Search",
        params: { keyword: this.keyword || undefined },
      });

//父路由组件
<router-link :to="{name:'Search',params:{keyword:123}}">进入搜索页面</router-link>

//父路由编程式传参
 this.$router.push({
      name: "Search",
      params: { keyword: this.keyword },//这种方式的传参必须要有路由的别名name
   });

this.$route.params.keyword

//父路由组件
<router-link :to="{name:'Search',query:{keyword:123}}">进入搜索页面</router-link>

//父路由编程式传参
 this.$router.push({
      name: "Search",
      query: { keyword: this.keyword },//这种方式的传参必须要有路由的别名name
   });

 this.$router.push(`/Search?k=${this.keyword}`);

this.$route.query.keyword

//子路由
 {
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true },
        props: true
    }

{
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true },
        props: { a: 1, b: 2 } //定义a和b两个变量
    }

 {
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true },
        props: route => ({ k: route.query.keyword, keyword: route.params.keyword })
    }

//首先在父路由里面设置路由跳转
this.$router.push({
        name: "Search",
        params: { keyword: this.keyword || undefined },
        query: { k: this.keyword.toUpperCase() },
      });
//然后给子路由的路径配置里面加上props
{
        path: '/Search/:keyword?',
        name: 'Search',
        component: () =>
            import ('../views/Search'),
        meta: { show: true },
        props: route => ({ k: route.query.k, keyword: route.params.keyword })
    }