Vue - 跳转和传参

目录

• 页面跳转
  • • 第一种：有名分组传参，$route.params接收参数
    • 第二种：通过params携带数据包传参
    • 第三种：通过query传参
• 逻辑转跳
  • • 第一种：有名分组
    • 第二种：通过params携带数据包传参
    • 第三种：通过query传参
    • 第四种：在当前页面中，有前历史记录与后历史记录

页面跳转

第一种：有名分组传参，$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：下下一页-->
}