vue路由判断页面是否有上一页，没有上一页点击返回返回到项目首页

最新推荐文章于 2024-09-15 00:30:13 发布

李白和星星

最新推荐文章于 2024-09-15 00:30:13 发布

阅读量349

点赞数 2

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_35469137/article/details/141472205

版权

这种情况通常发生在直接分享页面链接，当前页面并没有上一页，点击返回会直接将地址栏清空，所以我们可以判断页面是否有上一页，没有上一页点击返回返回到项目首页，或者没有上一页时隐藏返回按钮。

一返回首页

<script>
    let hasPath;
    export default{
        //在进入路由前监听路
         beforeRouteEnter(to, from, next) {
        next(() => {
            //console.log(from);
           hasPath = from.path
           
        })
        },
        methods:{
             back() {
            if (hasPath == '/') {
                //若没有上一页
                this.$router.push({path:'/'})
                return false
            } else {
                this.$router.go(-1)
            }
        }
        }
    }
</script>

二隐藏返回按钮

这个判断有无首页时，定义一个变量控制返回按钮的显隐即可。