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

  • 相关阅读:
    Java利用反射和读取xml实现迷你容器
    设计模式代码实现（java）
    智能时代的高效协作工具-TeamLinker,让团队像局域网一样工作
    【leetcode】2530.执行k次操作后的最大分数
    requests模块&代理IP池搭建$视频爬取
    Android逆向学习（番外一）smali2java部分文件无法反编译的bug与修复方法
    5G时代带动陶瓷PCB成长——GPS陶瓷天线调试方法 （一）
    冥想第九百七十七天
    计算机毕业设计之java+ssm峰值预警停车场管理系统
    Lua脚本实现setnx命令
  • 原文地址：https://blog.csdn.net/weixin_41957626/article/details/127978096