vue.js路由跳转,vue-router路由跳转,Vue路由跳转的4种方式小结

vue.js路由跳转,vue-router路由跳转,Vue路由跳转的4种方式小结

本文主要介绍了Vue路由跳转的四种方式的总结,并通过示例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。

目录

1,标签路由路由器-link2,编程路由此。$router.push()3,这个。$router.replace()(类似于这个。$router.push ()) 4、这个。$router.go(n)5,这个。$这个。$router.replace(),这个。$router.go(n)区分router-view实现路由内容的位置。介绍组件时,写在需要介绍的地方。需要注意的是,使用vue-router来控制路由需要将router-view作为一个容器。

按路线跳跃的四种方式

1、 标签路由 router-link

注意:在router-link中,如果链路以'/'开头,则表示从根路由开始;如果开头没有“/”,则从当前路线开始。

(1)不带参数

router-link :to='{name:'home'} '

router-link :to='{path:'/home'} '

(2)带参数

router-link :to='{name:'home ',params: {id:1}} '

//params传输参数(类似于post)

//路由配置路径:“/home/:id”或路径:“/home:id”

//如果不配置path,第一次可以请求的时候,刷新页面id会消失(比如点击一个产品图片的“查看详情”跳转到那个产品的详情页面,第一次进入详情页面就可以获取数据(根据产品id)。刷新页面后,id会丢失,相应的数据在页面上不可用)

//配置路径,保留刷新页面id

//html take $ route.params.id。

//脚本取此。$route.params.id

router-link :to='{name:'home ',查询:{id:1}} '

//查询传递参数(类似GET,参数会显示在URL之后)

//无法配置路由。

//html采用引用$ 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'}})

//query传递参数(类似get,参数会显示在页面的url之后)

//无法配置路由。

//html带参数$ route.query.id。

//脚本取此。$route.query.id

Params传输参数

这个。$ router.push ({name:' home ',params:{ ID:' 1 ' } })//只能使用name

//params传递参数

//路由配置路径:“/home/:id”

//如果没有配置path,可以第一次请求,刷新页面id会消失。

//配置路径,保留刷新页面id

//html take $ route.params.id。

//脚本取此。$route.params.id

3、this.$router.replace()(与this.$router.push()类似)

4、this.$router.go(n)

这个。$router.go(n)向前或向后跳转n页,其中n可以是正整数,也可以是负整数。

5、this.$router.push()、this.$router.replace()、this.$router.go(n)区别

1、这个。$router.push

跳转到指定的url路径,并在历史堆栈中添加一条记录。单击“上一步”返回上一页。

2、这个。$router.replace

跳转到指定的url路径,但是历史堆栈中不会有记录。点击返回会跳转到上一页(即直接替换当前页)

3、这个。$router.go(n)

或者前后跳转n页,其中n可以是正整数,也可以是负整数。

关于Vue路由跳四种方式的总结,本文到此结束。更多关于Vue路由跳转的信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: