• 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的代码修改为如下代码：

    第4步：about-tmp.vue，contact-tmp.vue，detail.vue，governance.vue四个组件的代码分别如下（1）（2）（3）（4）所示。

    （1）about-tmp.vue代码如下

    （2）contact-tmp.vue代码如下

    （3）detail.vue代码如下

    （4）governance.vue代码如下

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

  • 相关阅读:
    Linux字符设备驱动
    AFUDOS命令
    【GIS开发】Photoshop批处理GIS地图离线瓦片（Python）
    大数据必学Java基础（一百零二）：连接池的使用
    业务架构·应用架构·数据架构实战~业务驱动的应用架构设计
    四种常见分布式限流算法实现！
    高等数值计算方法学习笔记第4章【数值积分（数值微分）】
    免费小程序商城搭建之b2b2c o2o 多商家入驻商城 直播带货商城 电子商务b2b2c o2o 多商家入驻商城 直播带货商城 电子商务
    Jenkins学习笔记3
    2.7 - 文件管理 2.8 - 多级目录结构 2.9 - 位示图
  • 原文地址：https://blog.csdn.net/weixin_41957626/article/details/127978096