大家好，欢迎来到IT知识分享网。
路由的参数分为params参数和query参数，而params传参又可分为在url地址栏中显示参数和不显示参数两种方式。
方式一：params传参（显示参数）
在路径中显示参数，在配置路由时，需要占位，地址栏表现为/search/123
刷新页面，参数还在
若要表示params参数可有可无，可在后面加上?
path: ‘/search/:keyword?’
声明式导航
<router-link :to=”/search/123″>搜索</router-link>
编程式导航
This.$router.push({‘/search/keyword’})
方式二：params传参（不显示参数）
在路径中不显示参数，在配置路由时，不需要占位，但是需要name
刷新页面，参数消失
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都可以
path: ‘/search’,
声明式导航
<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 }
});
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/29824.html
