vue.js路由跳转,vue router中,实现路由跳转的方法
主要介绍了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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。