day67_10

一。路由跳转

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

}

巴特西

day67_10_11

最新文章

热门文章