Vue路由的params传参,query传参，以及传递props的写法

params传参

路由的params传参需要设置占位符，如给search组件通过params传递keyword值
路由配置信息

{
      name: "search",
      path: "/search/:keyword",
      component: Search,
    },

传递的方法有三种
第一种：直接传递字符串
使用编程式路由导航的写法

methods:{
	goSearch() {
	       this.$router.push("/search/" + this.keyword );
	    }
}，

第二种：模板字符串写法

methods: {
    goSearch() {
        this.$router.push(`/search/${this.keyword}`); 
      }
  }，

第三种：对象写法（常用写法）

 methods: {
    goSearch() {
      this.$router.push({
        name: "search",
        params: {
          keyword: this.keyword,
        }
      });
    },
},

值得注意的是，如果使用对象写法，那么就必须给路由配置name属性，并且在路由导航里必须用name来指定跳转的路径，因为路由传参的对象写法path不能和params参数一起使用。

query传参

路由的query传参同样也有三种写法，只不过query传参不需要提前占位

goSearch() {
      //1.直接传递字符串
      // this.$router.push("/search/?keyword=" + this.keyword);
      // 第二种：模板字符串
      // this.$router.push(`/search?k=${this.keyword}`);
      // 第三种：对象(常用)
      this.$router.push({
        //path: "/search",//此处用path或那么都行
        name: "search",
        query: {
          keyword: this.keyword,
        },
      });
    },
  },

传递props数据

传递props数据同样有三种写法
1.布尔值写法：只能用来传递params参数
路由配置信息如下

 {
      name: "search",
      path: "/search/:keyword",
      component: Search,
      //路由组件传递props数据
      //1.布尔值写法：params
       props: true,
    },

此时通过props传给Search组件的参数即为params的参数，只需在在组件中用props方法接收即可使用

2.对象写法：额外的给路由组件传递一些已知参数
配置信息如下

 {
      name: "search",
      path: "/search/:keyword",
      component: Search,
      //路由组件传递props数据
      //2.对象写法：额外的给路由组件传递一些props
      // props: { a: 1, b: 2 },
    },

3.函数写法（常用）：可以传递多种参数
路由配置信息如下

 {
      name: "search",
      path: "/search/:keyword?",
      component: Search,
      //3.函数写法（常用）
      props: ($route) => {
        return { keyword: $route.params.keyword, keyword2: $route.query.keyword2, a: 1 };
      },
    },

使用props传递的参数在组件中直接通过props接收然后就可以使用