您好,欢迎访问一九零五行业门户网

一文详解vue路由跳转-参数传递与接收

路由跳转1.声明式路由跳转
(不带参数)
通过router-link标签进行跳转,使用name或者path都可以,在dom结构中会被渲染成a标签
注意:router-link中链接如果是’/‘开始就是从根路由开始,如果开始不带’/’,则从当前路由开始。
     <router-link :to="{name:'home'}">   <router-link :to="{path:'/home'}">
(带参数)【相关推荐:vue.js视频教程】
注意:
params传参数 (类似post)
路由配置 path: /home/:id
不配置path,路由跳转可请求,刷新页面传递的参数会丢失,
配置path,刷新也买你id会被保留
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
获取路由跳转传递的参数:
html 通过 $route.params.id, script 通过this.$route.params.id
2.编程式路由跳转
1.字符串形式
router.push('home')
2.对象形式
router.push({ path: 'home' })router.push({ name: 'user'})
3.函数内调用
(不带参数)
this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})
(query传参)
this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})
html 取参 $route.query.id
script 取参 this.$route.query.id
(params传参)
只可以使用name
this.$router.push({name:'home',params: {id:'1'}})
html 取参$route.params.id, script 取参this.$route.params.id
3.query和params的区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
以上就是一文详解vue路由跳转-参数传递与接收的详细内容。
其它类似信息

推荐信息