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 开始构建 UI 库到 Markdown 生成文档和演示案例
Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目