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

  • 相关阅读:
    使用libcurl实现Amazon网页抓取
    开源替代方案的时间（Time Till Open Source Alternative，TTOSA）
    uniapp 学习笔记二十四 购物车编辑弹窗页面搭建
    算法日常训练12.4（最接近目标价格甜点成本）
    Zookeeper系列——1Zookeeper简介及部署
    宝塔服务器之堡塔应用管理器的使用【php消息队列】
    双十二选哪个品牌led灯好一点？国产led灯这些品牌护眼好
    Web前端编辑器：探索其深度与广度
    java学习
    电影《平凡英雄》
  • 原文地址：https://blog.csdn.net/weixin_41957626/article/details/127978096