Vue-CLI項目路由案例彙總

0901自我總結

Vue-CLI項目路由案例彙總

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Course from './views/Course'
import CourseDetail from './views/CourseDetail'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/course',
            name: 'course',
            component: Course,
        },
        {
            path: '/course/detail/:pk',  // 第一種路由傳參
            // path: '/course/detail',  // 第2、三種路由傳參
            name: 'course-detail',
            component: CourseDetail
        },
    ]
})

components/Nav.vue

<template>
    <div class="nav">
        <router-link to="/page-first">first</router-link>
        <router-link :to="{name: 'page-second'}">second</router-link>
        <router-link to="/course">課程</router-link>
    </div>
</template>

<script>
    export default {
        name: "Nav"
    }
</script>

<style scoped>
    .nav {
        height: 100px;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .nav a {
        margin: 0 20px;
        font: normal 20px/100px '微軟雅黑';
    }
    .nav a:hover {
        color: red;
    }
</style>

views/Course.vue

<template>
    <div class="course">
        <Nav></Nav>
        <h1>課程主頁</h1>
        <CourseCard :card="card" v-for="card in card_list" :key="card.title"></CourseCard>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    import CourseCard from '@/components/CourseCard'
    export default {
        name: "Course",
        data() {
            return {
                card_list: [],
            }
        },
        components: {
            Nav,
            CourseCard
        },
        created() {
            let cards = [
                {
                    id: 1,
                    bgColor: 'red',
                    title: 'Python基礎'
                },
                {
                    id: 3,
                    bgColor: 'blue',
                    title: 'Django入土'
                },
                {
                    id: 8,
                    bgColor: 'yellow',
                    title: 'MySQL刪庫高級'
                },
            ];
            this.card_list = cards;
        }
    }
</script>

<style scoped>
    h1 {
        text-align: center;
        background-color: brown;
    }
</style>

components/CourseCard.vue

<template>
    <div class="course-card">
        <div class="left" :style="{background: card.bgColor}"></div>
        <!-- 邏輯跳轉 -->
        <div class="right" @click="goto_detail">{{ card.title }}</div>
        
        <!-- 連接跳轉 -->
        <!-- 第一種 -->
        <!--<router-link :to="`/course/detail/${card.id}`" class="right">{{ card.title }}</router-link>-->
        <!-- 第二種 -->
        <!--<router-link :to="{-->
            <!--name: 'course-detail',-->
            <!--params: {pk: card.id},-->
        <!--}" class="right">{{ card.title }}</router-link>-->
        <!-- 第三種 -->
        <!--<router-link :to="{-->
            <!--name: 'course-detail',-->
            <!--query: {pk: card.id}-->
        <!--}" class="right">{{ card.title }}</router-link>-->
    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: ['card'],
        methods: {
            goto_detail() {
                // 注：在跳轉以前能夠完成其餘一些相關的業務邏輯，再去跳轉
                let id = this.card.id;
                // 實現邏輯跳轉
                // 第一種
                this.$router.push(`/course/detail/${id}`);
                // 第二種
                // this.$router.push({
                //     'name': 'course-detail',
                //     params: {pk: id}
                // });
                // 第三種
                // this.$router.push({
                //     'name': 'course-detail',
                //     query: {pk: id}
                // });

                // 在當前頁面時，有前歷史記錄與後歷史記錄
                // go(-1)表示返回上一頁
                // go(2)表示去向下兩頁
                // this.$router.go(-1)
            }
        }
    }
</script>
<style scoped>
    .course-card {
        margin: 10px 0 10px;
    }
    .left, .right {
        float: left;
    }
    .course-card:after {
        content: '';
        display: block;
        clear: both;
    }
    .left {
        width: 50%;
        height: 120px;
        background-color: blue;
    }
    .right {
        width: 50%;
        height: 120px;
        background-color: tan;
        font: bold 30px/120px 'STSong';
        text-align: center;
        cursor: pointer;
        display: block;
    }
</style>

views/CourseDetail.vue

<template>
    <div class="course-detail">
        <h1>詳情頁</h1>
        <hr>
        <div class="detail">
            <div class="header" :style="{background: course_ctx.bgColor}"></div>
            <div class="body">
                <div class="left">{{ course_ctx.title }}</div>
                <div class="right">{{ course_ctx.ctx }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CourseDetail",
        data() {
            return {
                course_ctx: '',
                val: '',
            }
        },
        created() {
            // 需求：獲取課程主頁傳遞過來的課程id，經過課程id拿到該課程的詳細信息
            // 這是模擬後臺的假數據 - 後期要換成從後臺請求真數據
            let detail_list = [
                {
                    id: 1,
                    bgColor: 'red',
                    title: 'Python基礎',
                    ctx: 'Python從入門到入土！'
                },
                {
                    id: 3,
                    bgColor: 'blue',
                    title: 'Django入土',
                    ctx: '扶我起來，我還能戰！'
                },
                {
                    id: 8,
                    bgColor: 'yellow',
                    title: 'MySQL刪庫高級',
                    ctx: '九九八十二種刪庫跑路姿式！'
                },
            ];
            // let id = 1;
            // this.$route是專門管理路由數據的，下面的方式是無論哪一種傳參方式，均可以接收
            let id = this.$route.params.pk || this.$route.query.pk;
            for (let dic of detail_list) {
                if (dic.id == id) {
                    this.course_ctx = dic;
                    break;
                }
            }
        }
    }
</script>

<style scoped>
    h1 {
        text-align: center;
    }
    .detail {
        width: 80%;
        margin: 20px auto;
    }
    .header {
        height: 150px;
    }
    .body:after {
        content: '';
        display: block;
        clear: both;
    }
    .left, .right {
        float: left;
        width: 50%;
        font: bold 40px/150px 'Arial';
        text-align: center;
    }
    .left { background-color: aqua }
    .right { background-color: aquamarine }

    .edit {
        width: 80%;
        margin: 0 auto;
        text-align: center;

    }
    .edit input {
        width: 260px;
        height: 40px;
        font-size: 30px;
        vertical-align: top;
        margin-right: 20px;
    }
    .edit button {
        width: 80px;
        height: 46px;
        vertical-align: top;
    }
</style>