本文主要介绍vue路由跳转的四种方式(带参数)。本文通过示例代码向您详细介绍,具有一定的参考价值。有需要的朋友可以参考一下。
1. router-link
1.没有参数
router-link :to='{name:'home'} '
router-link:to=' { path:'/home ' } '//name,path可以,name推荐。
//注意:如果router-link中的链路以'/'开头,则以根路由开头;如果开始时没有“/”,则从当前路线开始。
2.带参数
router-link :to='{name:'home ',params: {id:1}} '
//params传输参数(类似于post)
//路由配置路径:“/home/:id”或路径:“/home:id”
//如果没有配置path,可以第一次请求,刷新页面id会消失。
//配置路径,保留刷新页面id
//html take $ route.params.id。
//脚本取此。$route.params.id
router-link :to='{name:'home ',查询:{id:1}} '
//查询传递参数(类似GET,参数会显示在URL之后)
//无法配置路由。
//html采用引用$ route.query.id。
//脚本取此。$route.query.id
2. this.$router.push() (函数里面调用)
1.没有参数
这个。$router.push('/home ')
这个。$router.push({name:'home'})
这个。$router.push({path:'/home'})
2.查询传递参数
这个。$router.push({name:'home ',query: {id:'1'}})
这个。$router.push({path:'/home ',查询:{id:'1'}})
//html采用引用$ route.query.id。
//脚本取此。$route.query.id
3.参数介绍
这个。$ router.push ({name:' home ',params:{ ID:' 1 ' } })//只能使用name
//路由配置路径:“/home/:id”或路径:“/home:id”,
//如果没有配置path,可以第一次请求,刷新页面id会消失。
//配置路径,保留刷新页面id
//html take $ route.params.id。
//脚本取此。$route.params.id
4.查询和参数的区别
类似于查询get,跳转后的页面url后会拼接参数,类似于?Id=1,不重要的可以这样传,密码之类的还是可以用params刷新。页面id还在。
Params类似于post。跳转后,页面url后不会拼接参数,但是刷新后的页面id会消失。
3.这个。$router.replace()(同上,推送)
4.这个。$router.go(n)()
这个。$router.go(n)
或者前后跳转n页,其中n可以是正整数,也可以是负整数。
ps : 区别
这个。$router.push
跳转到指定的url路径,并将记录添加到历史堆栈中。单击“上一步”返回上一页。
这个。$router.replace
跳转到指定的url路径,但是历史堆栈中不会有记录。点击返回会跳转到上一页(即直接替换当前页)
这个。$router.go(n)
或者前后跳转n页,其中n可以是正整数,也可以是负整数。
总结
以上是边肖介绍的vue路由跳变的四种方式(带参数)的详细说明。希望对你有帮助。如果您有任何问题,请给我留言,边肖将及时回复您!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。