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项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- vue cli 项目的提交
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- Vue cli项目开启Gzip
目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...
- vue/cli项目添加外部js文件的一个方法
有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- VUE创建项目
Vue Cli项目搭建 vue项目需要自建服务器:node 什么是node: 用C++语言编写,用来运行JavaScript语言 node可以为前端项目提供server (包含了socket) ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
随机推荐
- 使用Python SMTP发送邮件
import smtplibfrom email.mime.text import MIMEText # 服务器SMPTserver = "smtp.163.com"# 发送邮件的 ...
- MongoDB的入门使用以及遇到的坑
一:MonoDB的简单介绍 MongoDB是一个介于关系型数据库与非关系型数据库中间的数据库,是使用C++进行编写的,他的优点是在支持的查询格式特别的强大,可以进行存储比较复杂的数据类型,支持建立索引 ...
- StateListDrawable资源的使用
StateListDrawable用于组织多个Drawable对象,当使用StateListDrawable作为目标组件的 背景和前景图片时,StateListDrawable对象所显示的Drawab ...
- 在nginx日志access log可以记录POST请求的参数值
1) 在nginx日志access log可以记录POST请求的参数值 实现程度:日志中可以显示POST请求所提交的参数值 问题: 日志中文显示十六进制(在配置文件中配置中文也无效) 没有对 ...
- C# 栈的应用
栈的特性:后进先出(LIFO) 回文判断 类似123321,123a321即为回文 思路: 将字符串前一半入栈 依次弹出栈与字符串后一半比较 public static bool IsPlalindr ...
- Java第三次作业第四题
4. [问题描述]读取一个文本文件in.txt,然后将这个文件的内容,反序写到另一个文件out.txt中. [输入形式]从文件in.txt中读信息. [输出形式]反序内容写入out.txt文件中. [ ...
- Nginx正确配置Location
文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 之前已经讲过Nginx的基本配置,本篇文章主要对Nginx中Location指令的作用进行介绍.本篇文章主要对 ...
- CDH5.16.1离线集成Phoenix
1.安装环境 Centos 7.6 CDH 5.16.1 2.下载Phoenix所需的parcel包 3.上传parcel包到ClouderaManager server所在的节点上 /opt/clo ...
- 最新2019Pycharm破解教程,附激活码!
本教程仅用作个人学习,请勿用于商业获利,造成后果自负!!! Pycharm安装 在这插一个小话题哈,Pycharm只是一个编译器,并不能代替Python,如果要使用Python,还是需要安装Pytho ...
- 前端基础-BOM和DOM学习
JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...