Vue - 跳转和传参

Posted 2022-09-14 863652104kai

目录

• 页面跳转
• 逻辑转跳

页面跳转

第一种：有名分组传参，$route.params接收参数

<!--传递层-->
<router-link :to='`/course/detail/$card.id`' class="right"> card.title </router-link>
<!--router.js-->

    path: '/course/detail/:pk',  <!--浏览器url：http://localhost:8080/course/detail/1-->  
    name: 'course-detail',
    component: CourseDetail
,
<!--接收层-->
let id = this.$route.params.pk;

第二种：通过params携带数据包传参

<!--传递层-->
<router-link :to="name:'course-detail',params:pk:card.id" class="right"> card.title </router-link>
<!--router.js-->

    path: '/course/detail/',  <!--浏览器url：http://localhost:8080/course/detail-->
    name: 'course-detail',
    component: CourseDetail
,
<!--接收层-->
let id = this.$route.params.pk;

第三种：通过query传参

<!--传递层-->
<router-link :to="name:'course-detail',query:pk:card.id" class="right"> card.title </router-link>
<!--router.js-->

    <!--浏览器url：http://localhost:8080/course/detail?pk=1,课程id是通过路由拼接方式传递-->
    path: '/course/detail/',  
    name: 'course-detail',
    component: CourseDetail
,
<!--接收层-->
let id = this.$route.query.pk;

常用的是有名分组第一种方式，如果参数不想让人看到就通过第二种params方式，想确切显示参数名与参数就用第三种方式

逻辑转跳

router-link是点击之后立即跳转，而我们有时需要在点击之后执行一些相应的逻辑后再跳转，这就是逻辑转跳

第一种：有名分组

<!--传递层-->
<div class="right" @click="goto_detail"> card.title </div>
methods:
    goto_detail()
    <!--注意：在这里可以实现转跳之前进行逻辑处理--> 
    let id = this.card.id
    <!--浏览器url:http://localhost:8080/course/detail/4-->
    this.$router.push(`course/detail/$id`)
    

<!--router.js-->
    path: '/course/detail/:pk',
    name: 'course-detail',
    component: CourseDetail
,
<!--接收层-->
let id = this.$route.params.pk;

第二种：通过params携带数据包传参

<!--传递层-->
<div class="right" @click="goto_detail"> card.title </div>
methods:
    goto_detail()
    <!--注意：在这里可以实现转跳之前进行逻辑处理--> 
    let id = this.card.id
    <!--浏览器url:http://localhost:8080/course/detail-->
    this.$router.push(
                    name:'course-detail',
                    params:pk:id
                ) 
        

<!--router.js-->
    path: '/course/detail/',
    name: 'course-detail',
    component: CourseDetail
,
<!--接收层-->
let id = this.$route.params.pk;

第三种：通过query传参

<!--传递层-->
<div class="right" @click="goto_detail"> card.title </div>
methods:
    goto_detail()
    <!--注意：在这里可以实现转跳之前进行逻辑处理--> 
    let id = this.card.id
    <!--浏览器url:http://localhost:8080/course/detail?pk=1-->
    this.$router.push(
                    name:'course-detail',
                    query:pk:id
                ) 
        

<!--router.js-->
    path: '/course/detail/',
    name: 'course-detail',
    component: CourseDetail
,
<!--接收层-->
let id = this.$route.query.pk;

第四种：在当前页面中，有前历史记录与后历史记录

methods:
    goto_detail()
        this.$router.go(n)  
<!--n是负数，从当前页往前历史记录跳，如n=-1：上一页，n=-2：上上一页-->
<!--n是正数，从当前页往后历史记录跳，如n=1：下一页，n=2：下下一页-->