路由跳转
1.声明式路由跳转
(不带参数)
(资料图片仅供参考)
通过router-link
标签进行跳转,使用name
或者path
都可以,在dom
结构中会被渲染成a
标签 注意:router-link
中链接如果是’/
‘开始就是从根路由开始,如果开始不带’/
’,则从当前路由开始。
(带参数)【相关推荐:vue.js视频教程】
注意:params
传参数 (类似post
) 路由配置 path: "/home/:id"
不配置path
,路由跳转可请求,刷新页面传递的参数会丢失, 配置path
,刷新也买你id会被保留
获取路由跳转传递的参数: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路由跳转-参数传递与接收的详细内容,更多请关注php中文网其它相关文章!