路由逻辑转跳-router.push与go的用法

逻辑转跳介绍

之前的三种方式都是通过<router-link>标签直接进行跳转，现在我们学习一种新的转跳方式：逻辑转跳

逻辑转跳的情况是什么呢？

比如我触发一个事件，然后我想进行一些额外的操作比如 '睡几秒' 或 ‘播放一个动画’ 再进行转跳。那么就要使用逻辑转跳了

思路

1 首先要有个标签绑定了这个事件

2 触发这个事件，在事件内部进行逻辑编写，以及利用this.$router.push()进行转跳

3 push内部的用法和之前学的路由传参的用法一致。

4 go 的用法-1返回一页，2前进到下两页。

代码

push用法

CourseCard.vue

<template>
...
    <div class="right" @click="goto_detail">
                    {{ cardcon.title}}
                    {{ cardcon.id}}
    </div>
...
</template>
<script>
    export default {
        name: "coure-card",
        // 接收父组件传过来的数据
        props:['cardcon'],
        methods:{
            goto_detail(){
                console.log(this.cardcon.id);
            //    在这里可以先写一些逻辑
            //    利用this.router.push('')进行跳转,用法和router-link标签一致。
            //    第一种 直接有名分组js拼接跳转
            //     this.$router.push(`/course/detail/${this.cardcon.id}`);

            //    第二种 利用name和params进行跳转
            //     this.$router.push({
            //         'name':'course-detail',
            //         params:{pk:this.cardcon.id}
            //     })
            //    第三种 利用name 和query 进行跳转
            //     this.$router.push({
            //         'name':'course-detail',
            //         query:{pk:this.cardcon.id}
            //     })
            }
        }
    }
</script>

go 的用法

CourseCard.vue

<script>
    export default {
        name: "coure-card",
        // 接收父组件传过来的数据
        props:['cardcon'],
        methods:{
            goto_detail(){
                console.log(this.cardcon.id);
            //    在这里可以先写一些逻辑
                
                // 返回上一页(最为常用)
                this.$router.go(-1);
                // 返回上两页
                // this.$router.go(-2);
                // 前进到下一页
                // this.$router.go(1)
            }
        }
    }
</script>