本文主要介绍了关于vue跳转页面的四种常用方法及其区别，通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
1:路由器-链路跳转2:这个。$ router.push () 3。这个。$ router.replace () 4。这个。$ router.go (n) PS:总结vue的跳转页面有几种不同的方式。在这里，我们将通过示例代码向您介绍，对您的学习或工作有所帮助。
1：router-link跳转
1.没有参数
router-link :to={name:home}
router-link:to= { path:/home } //name，path可以，name推荐。
//注意：如果router-link中的链路以/开头，则从根路由开始；如果没有/，则从当前路线开始。
2.使用params参数
router-link :to={name:home ，params: {id:123456}}
//params传输参数(类似于post)
//路由配置路径：“/home/:id”或路径：“/home:id”
//如果没有配置path，可以第一次请求，刷新页面id会消失；配置路径，刷新页面id将被保留。
//html取$route.params.id脚本取此。$route.params.id
3.使用查询参数
router-link :to={name:home ，query: {id:123456}}
//查询传递参数(类似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:123456}})
这个。$router.push({path:/home ，查询：{id:123456}})
//html取$route.query.id脚本取此。$route.query.id
3.参数介绍
这个。$ router.push ({name: home ，params:{ ID: 123456 } })//只能使用name
//路由配置路径：“/home/:id”或路径：“/home:id”，
//如果没有配置path，可以第一次请求，刷新页面id会消失。
//配置路径，保留刷新页面id
//html取$route.params.id脚本取此。$route.params.id
4.查询和参数的区别
类似于查询get，跳转后的页面url后会拼接参数，类似于？Id=123456。如果不重要，可以这样通过。密码之类的东西仍然被用来用params刷新页面id。
Params类似于post。跳转后，页面url后不会拼接参数，但刷新后的页面id会消失。
3. this.$router.replace()
用法和这个一样。第二个中的$router.push方法。
4. this.$router.go(n)
Button @click=upPage[上一页]/button
Button @click=向下翻页[下一页]/button
upPage() {
这个。$ router . go(-1)；//后退一步进行记录，相当于history.back()
},
定金(){
这个。$ router . go(1)；//在浏览器记录中前进一步，相当于history.forward()
}
或者前后跳转n页，其中n可以是正整数，也可以是负整数。
ps : 区别
这个。$router.push
跳转到指定的url路径，并将记录添加到历史堆栈中。单击“上一步”返回上一页。
这个。$router.replace
跳转到指定的url路径，但是历史堆栈中不会有记录。点击返回会跳转到上一页(直接替换当前页)。
这个。$router.go(n)
或者前后跳转n页，其中n可以是正整数，也可以是负整数。
总结
关于vue跳转页面的四种常用方法和区别的文章到此为止。关于vue跳转页面方法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
