Web前端开发技术实验报告
实验4 Vue.js路由实验
一、实验目的：
- 理解Vue路由及相关概念并掌握路由的编写与使用
二、实验要求：
- 掌握Vue.js路由的基本语法和相关插件、loader的安装与使用编写程序并调试，完成以下实验内容。
- 上交实验报告电子文档。文档包含源程序，以班级、学号后两位、姓名依次出现组成的字符串如“计算机20-1班01张三实验4” 标识。各班学委收齐本班本次实验后进行打包（打包文件为.rar或.zip类型），使用名称如“1班Web前端开发技术实验4”提交。
三、实验内容：
请使用Vue路由相关知识手动实现Tab栏切换案例，要求如下。
1、创建一个components/Message.vue组件，用来展示页面内容。
2、创建3个子路由，分别是“待付款”、“待发货”、“待收货”页面，在每个子路由页面单独写出相应的内容，页面效果如图1所示。
图1 实验题运行截图
四、实验过程中遇到的问题及解决手段：
1.报错截图如图e
图e
解决方法：原因是没有暴露Message组件，在Message组件中加上export default {
name:'Message'
}即可
五、实验结果和代码
1.实验结果
图1 实验运行截图
图2 实验运行截图
2.实验代码
components/Message.vue
<template>
<div>
<ul>
<li>
<a href="/message1">message001</a>
</li>
<li>
<a href="/message2">message002</a>
</li>
<li>
<a href="/message/3">message003</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'Message'
}
</script>
components/Banner.vue
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</template>
<script>
export default {
name:'Banner'
}
</script>
page/About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name:'About',
/* beforeDestroy() {
console.log('About组件即将被销毁了')
},*/
/* mounted() {
console.log('About组件挂载完毕了',this)
window.aboutRoute = this.$route
window.aboutRouter = this.$router
}, */
}
</script>
page/Home.vue
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name:'Home',
/* beforeDestroy() {
console.log('Home组件即将被销毁了')
}, */
/* mounted() {
console.log('Home组件挂载完毕了',this)
window.homeRoute = this.$route
window.homeRouter = this.$router
}, */
}
</script>
page/New.vue
<template>
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
</template>
<script>
export default {
name:'News'
}
</script>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/obligation.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('../views/ToBeDelivered.vue')
},
{
path: '/receive',
name: 'receive',
component: () => import('../views/receive.vue')
}
]
const router = new VueRouter({
routes
})
export default router
App.vue
<template>
<div>
<div class="row">
<Banner/>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我们使用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Banner from './components/Banner'
export default {
name:'App',
components:{Banner}
}
</script>
- 本次实验的体会（结论）：
通过这次实验我理解Vue路由及相关概念并掌握路由的编写与使用，同时明白了只有自己亲自动手去编写程序才能把书本的内容与实际结合起来，才能更容易的把知识牢记于心。在动手真正的去编程往往会发生各种各样的问题，如果不去实践就会永远堆积问题，停滞不前，就会落后。编程需要沉淀，不能急功近利，欲速则不达，花时间打好基础，基础不牢地动山摇。
