路由传参的几种方式

路由的参数分为params参数和query参数，而params传参又可分为在url地址栏中显示参数和不显示参数两种方式。

方式一： params传参（显示参数）

在路径中显示参数，在配置路由时，需要占位，地址栏表现为/search/222，
刷新页面参数依然存在。若要表示参数可有可无，需要在后面添加？

path: '/search/:keyword?'

声明式导航

<router-link :to="/search/222">搜索</router-link>

编程式导航

This.$router.push({'/search/keyword'})

方式二：params传参（不显示参数）

在配置路由文件中，不需要占位，但是需要name，页面刷新，params参数丢失。

path: '/search',
name:'search',

声明式导航

<router-link :to="{name:'search',params:{keyword:123}}">搜索</router-link>

编程式导航

This.$router.push({

​ name:'search',

​ params:{ keyword:123 }

})

获取params参数（注意这里是route，不是router）

this.$route.params.keyword

方式三：query传参

不需要设置占位，地址栏表现为：/search?keyword=123，
跳转路由用name和path都可以

声明式导航

<router-link :to="{path:'/search',query:{keyword:123}}">搜索</router-link>

编程式导航

This.$router.push({

​ path:'/search',

​ query:{ keyword:123 }

})

获取query参数

this.$route.query.keyword

---

那么params参数和query参数能不能同时传递呢？当然可以

this.$router.push({

​ name:'search',

​ params:{ keyword:123 },

​ query:{ id:001 }

});

以对象形式传参时需要注意，如果使用了params，只能使用name，不能使用path。因为如果提供了 path，params 会被忽略，此时获取到的params将会是undefined。

路由传参的相关问题

params参数可以传递可以不传递，但是如果传递为空字符串，如何解决？
使用undefined解决

this.$router.push({

​ name:'search',

​ params:{ this.keyword || undefined },

​ query:{ id:001 }

});