Vue路由传参两种方式
在vue-router路由中,传参方式一般分两种:利用$route.query对象的Get方式传参,与http的get方式一样,会将参数暴露到地址栏,使用方式如下:路由请求发起(编程式导航):this.$router.push({path:'/selectById', query: {id: this.id}});参数接收:{{this.$route.query.searchBody}}另一种是利
·
在vue-router路由中,传参方式一般分两种:
利用$route.query对象的Get方式传参,与http的get方式一样,会将参数暴露到地址栏,使用方式如下:
路由请求发起(编程式导航):
this.$router.push({path:'/selectById', query: {id: this.id}});
参数接收:
{{this.$route.query.searchBody}}
另一种是利用$route.params对象的Post方式传参,该方式具有一定限制,必须通过路径传参方式。
路由配置(根组件的路由配置js,若是vue-cli构建则为src/router/index.js):
import Vue from 'vue' import Router from 'vue-router' import User from '@/components/User' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: 'index' }, { path: '/selectById/:id', component: User } ] })
路由请求发起:
this.$router.push({path:'/selectById', params: {id: this.id}});
参数接收:
{{this.$route.params.searchBody}}
以上是常用的两种router传参方式,特别需要注意如果params不通过路径地址传参的话是取不到值的。
更多推荐
已为社区贡献1条内容
所有评论(0)