写点什么

前端开发: 路由跳转页面详解

用户头像
三掌柜
关注
发布于: 2021 年 03 月 18 日
前端开发: 路由跳转页面详解

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

先来分享路由实现页面跳转的方式:方法一:通过 JS 实现页面跳转,方法二:通过<router-link>实现页面跳转。

方法一:通过 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}})
                }
         }
复制代码



方法二:通过<router-link>实现页面跳转的方法

1、直接通过使用<router-link>组件来实现页面跳转,在<router-link>里面添加一个跳转的导航链接即可,如:

(1)直接跳转:<router-link to=“detail”>页面详情</router-link>

(2)v-bind 跳转:<router-link :to="'detail'">页面详情</router-link> 或者 <router-link :to="{ name: 'detail' }">页面详情</router-link>

(3)传参跳转:<router-link :to="{ name: 'detail', params: { id: 1023 }}">页面详情</router-link>

  但是想要使用传参的时候,需要在 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”,欢迎关注!

三掌柜的微信公众号:


三掌柜的新浪微博:


发布于: 2021 年 03 月 18 日阅读数: 17
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
3月日更打卡第十一天
2021 年 03 月 18 日 21:34
回复
没有更多了
前端开发: 路由跳转页面详解