前端开发|前端开发( 路由跳转页面详解)

在前端开发的时候,路由跳转是非常经典的知识点之一,对于刚入门的开发者来说,可能会一知半解,那么本篇博文就来分享一下前端开发过程中路由跳转的使用,以及在路由跳转中可能会遇到的问题和注意事项,该知识点比较基础,技术大牛就不要进来看了,只分享给有需要的人。
先来分享路由实现页面跳转的方式:方法一:通过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
在跳转过去的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”,欢迎关注!
三掌柜的微信公众号:
前端开发|前端开发( 路由跳转页面详解)
文章图片

三掌柜的新浪微博:
【前端开发|前端开发( 路由跳转页面详解)】前端开发|前端开发( 路由跳转页面详解)
文章图片


    推荐阅读