Vue-CLI项目路由案例汇总
程序员文章站
2022-04-29 21:01:44
0901自我总结 Vue CLI项目路由案例汇总 router.js components/Nav.vue views/Course.vue components/CourseCard.vue vue
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>
上一篇: 流产吃花菜可以吗