VUE基础编程（三）

案例要求

基于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 联系我们页面