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

views/Course.vue

components/CourseCard.vue

views/CourseDetail.vue