vue-cli项目中this.$router.push传参的各种方式和接受参数
1、必须在router/index.js中配置这里有三个参数,后面跳转需要用到:1、path:跳转路径2、name:跳转的名字3、component:组件名字2、跳转this.$router.push({key1:'/xx/xx',key2: {id:'1'}});key1:可以写2个值name:根据路由配置中的name属性查找,进行跳转。值必须是路由...
·
1、必须在router/index.js中配置
这里有三个参数,后面跳转需要用到:
1、path:跳转路径
2、name:跳转的名字
3、component:组件名字
2、跳转
this.$router.push({key1:'/xx/xx',key2: {id:'1'}});
key1:可以写2个值
- name:根据路由配置中的name属性查找,进行跳转。值必须是路由配置的name对应的
- path:根据路由配置的path属性查找,如果path错误,则根据路由配置的name查找进行跳转。值可以是路由配置的path,也可以是路由配置的name
key2:可以写2个值
- query:类似于get方法,把参数拼接在浏览器上面,通过this.$route.query获取值,获取一次值后,刷新浏览器值还在。
- params:类似于post方法,参数没有拼接在浏览器上,通过this.$route.params获取值,跳转过去后能获取到值,刷新后就失效了。
所以排列组合后共四种形式
- this.$router.push({name:'/xx/xx',query: {id:'1'}});
- this.$router.push({name:'/xx/xx',params: {id:'1'}});
- this.$router.push({path:'/xx/xx',query: {id:'1'}});
- this.$router.push({path:'/xx/xx',params: {id:'1'}});
同理,使用router-link标签也是一样的
<router-link :to="{key1:''Message'',key2:{id:'1'}}">XXX</router-link>
更多推荐
已为社区贡献6条内容
所有评论(0)