Vue-CLI项目路由案例汇总

Posted pythonywy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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',  // 第二、三种路由传参
            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>

以上是关于Vue-CLI项目路由案例汇总的主要内容,如果未能解决你的问题,请参考以下文章

Vue-cli项目开发

前端面试题Vue-cli目录汇总

vue-cli脚手架——3.0版本项目案例

从 Vue-cli 开始构建 UI 库到 Markdown 生成文档和演示案例

vue-cli嵌套路由

Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目