实验代码:实验3第2题实验参考.rar-互联网文档类资源-CSDN下载

Web前端开发技术课程实验报告

实验3：Vue路由实验

姓名：_   __　_   ___   ___   班级：_ _ _   ___　_   __　

学号：_   ____   ___   ___    成绩：_ _ _   __　         

一、实验目的：

1. 掌握Vue路由相关知识及应用。

二、实验要求：

1. 了解Vue路由相关知识和相关插件、loader的安装与使用
2. 编写程序完成以下实验内容并上交实验报告（电子文档，以班级、学号后两位、姓名、实验序号命名，如：计算机18-1班01冯晨月实验3）

三、实验内容：

    （一）实验基础

1、.vue文件

.vue文件又叫"单文件组件"，是一种可以把样式、逻辑、模板写在一个文件里，独立发布、便于管理的格式。这种格式需要通过webpack进行处理。

.vue文件包含的三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html、js、css。其中 <template> 和 <style> 是支持用预编译语言来写的，假若在项目中用了scss 预编译，则<style>需这样写：<style lang=”scss” >。

.vue文件可能理解成是包含Html、JavaScript、CSS的网页文件，只不过原生网页文件是解释执行，而.vue文件需编译执行。

2、本次实验主要通过模仿教材“5.3.3 代码实现”一节中的实现步骤，初步掌握Vue路由相关知识及应用方法。

（二）实验题

1、请使用Vue路由相关知识手动实现Tab栏切换案例，要求如下。

①创建一个components/Message.vue组件，用来展示页面内容。

②创建3个子路由，分别是“待付款”、“待发货”、“待收货”页面，在每个子路由页面单独写出相应的内容，页面效果如图1、图2所示。

                  

 

 

图1 Tab栏切换显示待付款内容                  图2 Tab栏切换显示待发货内容

2、在第1题的基础上进一步应用嵌套路由实现文字选项卡和内容的切换。页面中有“音乐”、“电影”和“新闻”3 个类别选项卡，单击不同选项卡下的子栏目可以显示对应的内容，结果如图1、图2所示。

                          

 

 

图1 显示流行音乐内容                                 图2 显示喜剧电影内容

四、设计思路：

五、实验过程中遇到的问题及解决手段：

六、本次实验的体会（结论）：