vue 返回前一个页面操作

需求描述

1. 点击返回按钮返回到前一个页面
2. 当没有前一个页面时，默认跳到首页

1. 方法一

此方法根据浏览器默认的历史记录操作 window.history 。
但是此方法存在一个问题：当前一个页面并非本网站（为第三方）页面则会跳到第三方页面

如：从 baidu.com --> https://bscproject.org/#/project/1
点击返回时会跳到 baidu.com
并不会跳到 https://bscproject.org/

具体实现方法：

<a href="javascript:;" @click="goBackPath">Back</a>

methods: {
    goBackPath(){
      if(window.history.length>1){
        this.$router.back();
      }else{
        this.$router.push('/');
      }
    }
}

2. 方法二

此方法根据 vue-router 路由守卫，点击查看官方讲解，判断前一个路由是什么。

此方法需要给每个路由设置一个唯一的属性来判断，如’name’等。
此方法只能在该网站内跳转，返回按钮不会跳到第三方网站，
根据自己的产品需求判断使用哪种方法

具体实现方法：

<router-link :to="backPath">Back</router-link>

export default {
	data() {
      return {
		backPath:'/'
	  }
    },
	beforeRouteEnter(to, from, next) {
	  let path = from.path;
	  if(!from.name){
	    path='/'
	  }
	  next(v=>{
	    v.backPath = path;
	  })
	},
}

我的个人博客有空来坐坐

https://www.wangyanan.online