>首页> IT >

【全球速看料】一文详解vue路由跳转-参数传递与接收

时间:2022-08-10 16:57:03       来源:转载

路由跳转

1.声明式路由跳转

(不带参数)


(资料图片仅供参考)

通过router-link标签进行跳转,使用name或者path都可以,在dom结构中会被渲染成a标签 注意:router-link中链接如果是’/‘开始就是从根路由开始,如果开始不带’/’,则从当前路由开始。

  

(带参数)【相关推荐:vue.js视频教程】

注意:params传参数 (类似post) 路由配置 path: "/home/:id"不配置path,路由跳转可请求,刷新页面传递的参数会丢失, 配置path,刷新也买你id会被保留

获取路由跳转传递的参数:html通过 $route.params.idscript通过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.idscript取参 this.$route.query.idparams传参) 只可以使用name

this.$router.push({name:"home",params: {id:"1"}})

html取参$route.params.idscript取参this.$route.params.id

3.queryparams的区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id会消失

以上就是一文详解vue路由跳转-参数传递与接收的详细内容,更多请关注php中文网其它相关文章!

关键词: 刷新页面 参数传递 相关文章