10_11 vue路由跳转

一。路由跳转

　　在vue中，路由条状有很多种。

　　其中有点击事件触发的路由跳转：

this.$router.push('/course');

　　和通过名字跳转的：

this.$router.push({name: course});

　　对history操作的go语法，可以调节回退页面：

this.$router.go(-1);
this.$router.go(1);

　　在router-link中，也有可以跳转路由的方法：

<router-link to="/course">课程页</router-link>

　　跳转字典对象的：

<router-link :to="{name: 'course'}">课程页</router-link>

二。路由传参。

　　如果需要传递参数给各个页面。反馈不同的页面，需要传毒有参路由：

　　第一种。

　　通过：id的有参参数传递给路由：

　　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;
}

　　第二种

　　在push种有params传递参数，也可以通过query传递参数，这里通过router-link传递字典对象。

　　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;
}