在前端开发的时候，路由跳转是非常经典的知识点之一，对于刚入门的开发者来说，可能会一知半解，那么本篇博文就来分享一下前端开发过程中路由跳转的使用，以及在路由跳转中可能会遇到的问题和注意事项，该知识点比较基础，技术大牛就不要进来看了，只分享给有需要的人。
先来分享路由实现页面跳转的方式：方法一：通过JS实现页面跳转，方法二：通过
方法一：通过JS实现页面跳转的方法
1、首先在template模块里面实现需要跳转的地方，如:
2、然后直接在script模块里面实现具体点击事件的，如下所示：
(1)基本的简单的无传参的页面跳转写法：
methods:{
toDetail(){
this.$router.push({path: ‘/detail’})
}
}
(2)需要传参的页面跳转写法:
methods:{
toDetail(){
this.$router.push({name: ‘/detail’, params:{id: 102}})
}
}
文章图片
(3)需要传地址键值对的页面跳转写法：
methods:{
toDetail(){
this.$router.push({name: ‘/detail’, query: {dataObj: data}})
}
}
文章图片
方法二：通过
1、直接通过使用
（1）直接跳转：
（2）v-bind跳转：
（3）传参跳转：
但是想要使用传参的时候，需要在 router.js文件中对detail的路径进行配置，在 path 中detail后面添加通配符 : 和对应的 id，具体设置如下：
{
path: '/detail/:id',
name: 'detail',
component: detail
},
（4）传地址键值跳转：
在跳转过去的detail页面获取传过去的键值对的方法，直接在mounted钩子函数里面调用this.$route.query.dataObj即可，如：
mounted () {
console.log(this.$route.query.dataObj) //打印出来data
}
讲完跳转到新页面之后，再来讲讲返回到跳转之前的页面的方法。返回上一页的方法有两种：go()和back()。
第一种返回方法：go()的使用方法，如下所示:
1、 向前(n > 0)查找或向后(n < 0)查找
go(-1);
//返回上一页，原页面表单中的内容会移除；
history.go(-1);
//后退+刷新；
history.go(1);
//前进
第二种返回方法：back()的使用方法，如下所示:
1、回退功能，在回退的时候判断有没有上一个路由，并跳转到该页面
back();
//不刷新返回上一页，原页表表单中的数据会保留；
history.back(-1);
//刷新返回当前页的上一页，数据全部消失
history.back(0) ;
//刷新；
history.back(1);
//前进
eg: window.history.back();
//刷新返回，数据全部消失
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
三掌柜的微信公众号：
文章图片
三掌柜的新浪微博：
【前端开发|前端开发（ 路由跳转页面详解）】
文章图片
推荐阅读
- 前端|黄聪（微信小程序(应用号)资源汇总整理（转））
- vue|超级详细的Vue-cli3使用教程
- 项目|若依Ruoyi-Vue学习笔记
- vue中easyplayer使用
- 学习|移动端测试的学习
- elementui|java基于Springboot+vue的宠物销售商城网站 elementui
- elementui|基于Springboot+vue的化妆品美妆销售商城网站 elementui
- elementui|基于Springboot+vue的体用用品销售商城网站 elementui
- Vue|Vue第五天学习总结——Vue全家桶之前端工程化(模块化相关规范、webpack、Vue单文件组件、Vue脚手架、组件库——Element-UI 的基本使用)