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