前端开发： 路由跳转方法的详细介绍

这是我参与更文挑战的第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”，欢迎关注！