这是我参与更文挑战的第10天,活动详情查看:更文挑战
在前端开发的时候,路由跳转是非常经典的知识点之一,对于刚入门的开发者来说,可能会一知半解,那么本篇博文就来分享一下前端开发过程中路由跳转的使用,以及在路由跳转中可能会遇到的问题和注意事项,该知识点比较基础,只分享给有需要的人。
首先来分享路由实现页面跳转的方式:
- 方法一:通过JS实现页面跳转;
- 方法二:通过实现页面跳转。
方法一:通过JS实现页面跳转的方法
1、首先在template模块里面实现需要跳转的地方
如:
<button class=“aaa” @click=“toDetail”>页面详情</button>
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)传地址键值跳转:
<router-link :to="{ path: 'detail', query: { dataObj: data }}">detail</router-link>
在跳转过去的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”,欢迎关注!
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END