案例要求
基于Vue Cli和嵌套路由技术，完成以下功能：
站点打开后会默认显示如图3.1所示的“关于公司”页面，单击图3.1页面上的“公司简介”链接，站点会显示如图3.2所示的“公司简介”页面，单击图3.1页面上的“公司治理”链接，站点会显示如图3.3所示的“公司治理”页面，单击以上任一页面上的“联系我们”链接，站点会显示如图3.3所示的“联系我们”页面，单击以上任一页面上的”关于公司”链接，站点会显示如图3.1所示的“关于公司”页面。
图3.1关于公司页面
图3.2公司简介页面
图7.15公司治理页面
图 3.3 联系我们页面
准备工作：搭建一个vue-cli项目，命名为shiyan7。
第1步：搭建一个vue-cli项目，命名为shiyan7。
图4.2.1 创建vue脚手架
第2步：下载依赖包和打包测试运行。
图4.2.2 运行vue初始化界面
图4.2.3 vue的初始化界面效果图
第3步：删除HelloWord.vue，在“components”下创建about-tmp.vue，contact-tmp.vue，detail.vue，governance.vue四个组件。并将App.vue的代码修改为如下代码：
| <template> <!-- 要显示的主页信息 --> <div id="app"> <ul> <router-link to="/about" tag="li">关于公司</router-link> <router-link to="/contact" tag="li">联系我们</router-link> </ul> <router-view></router-view> <!--给组件提供插入位置--> </div> </template> <script> export default { name:'app' } </script> <style> /* 设置样式 */ ul, li, h1 { padding: 0; margin: 0; list-style: none } #app { width: 100%; display: flex; flex-direction: row; } ul { width: 200px; flex-direction: column; color: #fff; } li { flex: 1; background: #000; margin:5px auto; text-align: center; line-height: 30px; } .about-detail { flex:1; margin-left: 30px; } .about-detail h1{ font-size: 24px; color: blue; } </style> |
第4步：about-tmp.vue，contact-tmp.vue，detail.vue，governance.vue四个组件的代码分别如下（1）（2）（3）（4）所示。
（1）about-tmp.vue代码如下
| <template> <div class="about-detail"> <h1>北京xx科技有限公司简介</h1> <router-link to="/about/detail">公司简介</router-link> | <router-link to="/about/governance">公司治理</router-link> <router-view></router-view> <!--给子组件提供插入位置--> </div> </template> <script> export default { name:'about' } </script> <style> </style> |
（2）contact-tmp.vue代码如下
| <template> <div class="about-detail"> <h1>联系我们</h1> <p>公司位于北京市海淀区中关村科技园内，主营业务包括餐饮娱乐、服装设计等</p> </div> </template> <script> export default { name:'contact' } </script> <style> </style> |
（3）detail.vue代码如下
| <template> <p>xx是全球领先... ...</p> </template> <script> export default { name:'detail' } </script> <style> </style> |
（4）governance.vue代码如下
| <template> <p>公司坚持以客户为中心、以奋斗者为本... ...</p> </template> <script> export default { name:'governance' } </script> <style> </style> |
第5步：配置路由信息，修改src/router/index.js，代码如下。
| import Vue from 'vue' import Router from 'vue-router' import about from '@/components/about-tmp' import contact from '@/components/contact-tmp' import detail from '@/components/detail' import governance from '@/components/governance' // 配置路由 Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/about' }, // 路由重定向 , { path: '/about',//碰到这个路由就会跳转 name: 'about',//路由的别名 component: about,//表示路由在当前的路径下 children: [ { path: 'detail', component: detail }, { path: 'governance', component: governance } ] }, { path: '/contact',//碰到这个路由就会跳转 name: 'contact',//路由的别名 component: contact//表示路由在当前的路径下 } ] }) |
第6步：项目路径下输入cmd，打开控制台，输入“npm run dev”编译打包运行项目。
图4.2.4 关于公司页面
图4.2.5 公司简介页面
图4.2.6 公司治理页面
图4.2.7 联系我们页面
![[附源码]java毕业设计校园失物招领平台](https://img-blog.csdnimg.cn/6a4cf5336a304d2496f354807f35b648.png)
