本文详细介绍了在Vue中如何通过methods进行路由跳转，并分别使用params和query方式传递数据给子路由。对于params，数据会出现在URL中但不会显示在浏览器的地址栏；而query方式的数据则会显示在URL的查询字符串中。在子路由中，通过$route对象分别获取这两个参数。理解并正确使用这两种方式对于Vue应用的后期维护至关重要。
为了便于后期维护,路由跳转以点击事件的形式绑定在methods中
params
父路由配置
toSonRouter() {
this.$router.push({
name: "xxx",//配置路由时加一个name的属性值来代替path
params: {
keyWord: this.$data.xxx,//将一个本地变量赋给keyWord传给子路由
},
});
},
子路由接受数据
//以如下形式接收,注意是$route而不是$router!!!
this.$route.params.keyWord
query
父路由配置
toSonRouter() {
this.$router.push({
path: "/xxx",//路由的path
query: {
keyWord: this.$data.xxx,//将一个本地变量赋给keyWord传给子路由
},
});
},
子路由接受数据
//以如下形式接收,注意是$route而不是$router!!!
this.$route.query.keyWord
注:
一个是name 一个是name 注意区分
扫一扫
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
