vue路由

Posted 2021-03-26 sunbreaker

路由跳转

this.$router.push(‘/course‘);
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">课程页</router-link>
<router-link :to="{name: ‘course‘}">课程页</router-link>

路由传参

第一种

router.js

routes: [
	// ...
    {
        path: ‘/course/:id/detail‘,
        name: ‘course-detail‘,
        component: CourseDetail
    },
]

跳转.vue

<template>
	<!-- 标签跳转 -->
	<router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
</template>
<script>
	// ...
    goDetail() {
        // 逻辑跳转
        this.$router.push(`/course/${this.course.id}/detail`);
    }
</script>

接收.vue

created() {
    let id = this.$route.params.id;
}

第二种

router.js

routes: [
	// ...
    {
        path: ‘/course/detail‘,
        name: ‘course-detail‘,
        component: CourseDetail
    },
]

跳转.vue

<template>
	<!-- 标签跳转 -->
	<router-link :to="{
            name: ‘course-detail‘,
            query: {id: course.id}
        }">{{ course.name }}</router-link>
</template>
<script>
	// ...
    goDetail() {
        // 逻辑跳转
        this.$router.push({
            name: ‘course-detail‘,
            query: {
                id: this.course.id
            }
        });
    }
</script>

接收.vue

created() {
    let id = this.$route.query.id;
}