vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由

你的名字 2021-11-26 16:52 136阅读 0赞

> ### 不积跬步无以至千里 ###
> 
> > 因为不熟悉，每次整理都花费了不短的时间，现在以码代码为主，到每个阶段再整理。  
> > 本次整理内容  
> > \--- 底部导航显示  
> > \----- 给谷歌浏览器安装vue调试插件  
> > \--- 各模块的静态页面搭建完成  
> > \--- 添加登录页静态页面与路由

### 0. 其它 ###

[vue实战（1）：准备与资料整理][vue_1]  
[vue实战（2）：初始化项目、搭建底部导航路由][vue_2]  
[vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由][vue_3]  
[vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态][vue_4_postman_ajax_vuex]  
[vue实战（5）：总结一][vue_5]  
[vue实战（6）：异步显示数据、开发Star组件][vue_6_Star]  
[vue实战（7）：完整开发登录页面（一）][vue_7]  
[vue实战（8）：完整开发登录页面（二）][vue_8]  
[vue实战（9）：总结二][vue_9]  
[vue实战（10）：开发店铺详情（一）][vue_10]

## 1. 底部导航显示 ##

![完成的底部样式][1240]

*  底部导航结构

|-- components                                - 非路由组件文件夹
             |---- FooterGuide                     - 底部组件文件夹
                    |---- FooterGuide.vue          - 底部组件

*  搭建静态页面与添加*css*样式

<div class="footer_guide">
     
       <span class="guide_item" :class="{on: '/Msite' === $route.path}" @click="goto('/Msite')">
          <span class="item_icon">
            <i class="iconfont iconshop"></i>
          </span>
          <span>外卖</span>
        </span>
      
        <span>
          ……
        </span>
    </div>

*  使用*icon*,矢量图标  
    前面在阿里巴巴矢量图库整理的图标在这边使用，`<i class="iconfont iconshop"></i>`  
    以外部链接形式应用，使用时添加*class*即可，`iconfont`为固定*class*,`iconshop`为图标的名字，直接在网页上粘贴复制过来防止出错。
 *  使用对象语法`:class="{class名: boolean}"`  
    对象语法的作用是判断在*class*确定的情况下，是否需要。这里强制绑定*class='on'*,是在切换时颜色也会变化。
    
    ##### \+为浏览器安装*Vue.js devtools*插件 #####
    
     *  打开谷歌插件商城，添加 Vue.js devtools 插件，便于调试
     *  无法打开插件商城，百度搜索下载 '谷歌商城助手' 安装
     *  如下载好 .crx 文件安装失败或者无法安装等问题，把文件后缀名改成 .zip ，解压缩后再在浏览器扩展程序页面进行导入
 *  添加点击事件`@click="goto('/Msite')"`

export default {
      name: 'FooterGuide',
      methods: {
        goto (path) {
          this.$router.replace(path)
        }
      }
    }

*  `$route`与`$router`  
    [链接：vue-router中`$route` 和`$router`][vue-router_route_ _router]
 *  在*App.vue*中引入

<template>
      <div id="app">
        <router-view></router-view>
        <FooterGuide v-if="$route.meta.showFooter"></FooterGuide>
      </div>
    </template>
    
    <script>
    import FooterGuide from './components/FooterGuide/FooterGuide'
    export default {
      name: 'App',
      components: {
        FooterGuide
      }
    }
    </script>

*  测试  
    *npm run serve* 启动，点击切换成功  
    ![首页页面][1240 1]

![搜索页面][1240 2]

![订单页面][1240 3]

![个人页面][1240 4]

## 2. 搭建各模块静态页面 ##

*  引用*css*时候，有一个**坑**  
    写项目时，发现在*index.html*中引入`<link rel="stylesheet" href="/static/css/reset.css">`公用*css*没有效果，我重新在*main.js*中引入`import '../static/css/reset.css'`才有效果，具体原因没有仔细的去找原因，以后找找原因再整理。
 *  模块结构

*  搭建各模块静态页面与添加*css*样式
 *  搭建完成后，提取头部组件  
    *components*文件夹下添加*HeaderTop*文件夹并添加*HeaderTop.vue*
 *  头部组件使用 '插槽' 传值 `<slot name="插槽名"></slot>`

<template>
      <header class="header">
        <slot name="left"></slot>
    
        <span class="header_title">
          <span class="header_title_text ellipsis">{
        {title}}</span>
        </span>
    
        <slot name="right"></slot>
      </header>
    </template>
    
    <script>
    export default {
      name: 'HeaderTop',
      props: {
        title: String
      }
    }
    </script>

*  各模块头部组件替换  
    '插槽' 还不怎么会使用，不过不是很难，使用起来问题不大。主要是`router-link`标签，`slot="指定插槽名"`与`to="跳转路由"`

<HeaderTop title="昌平区北七家宏福科技园(337省道北)">
          <router-link class="header_search" slot="left" to="">
            <i class="iconfont iconfangdajing"></i>
          </router-link>
          <router-link class="header_login" slot="right" to="">
            <span class="header_login_text">登录|注册</span>
          </router-link>
        </HeaderTop>

*  抽取商店列表为单独组件  
    \--*components*文件夹下添加*ShopList*文件夹并添加*ShopList.vue*  
    \--抽取页面与*css*  
    \--在*Msite*引入
 *  使用*Swiper*对**首页页面**图片中的**2**部分进行改造  
    *Swiper*为轮播插件，看了官网文档，现在已经支持*vue*了，[官方文档][Link 1]  
    \---在项目中添加依赖`npm install vue-awesome-swiper --save`  
    \---*main.js*中引用并使用`import VueAwesomeSwiper from 'vue-awesome-swiper'`，`Vue.use(VueAwesomeSwiper)`  
    \---在使用的地方引用*css*`import 'swiper/dist/css/swiper.css'`  
    照着文档傻瓜式的操作后，轮播完成

methods: {
        _initSwiper () {
          new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            pagination: {
              el: '.swiper-pagination'
            }
          })
        }
      },
      mounted () {
        this._initSwiper()
      }

## 3. 添加登录页 ##

*  搭建登录页静态页面与添加*css*样式
 *  要求点击**个人页面**图片上的**登录/注册**，进入*Login*页面
 *  在*router.js*中配置*login*路由`import Login from '../views/Login/Login'`，`{ path: '/login', component: Login }`
 *  在*Profile.vue*中改造标签为`router-link`并添加路由`to="/login"`，实现跳转
 *  去除登录页导航栏  
    对*App.vue*中的*FooterGuide*标签进行判断`<FooterGuide v-if="$route.meta.showFooter"> </FooterGuide>`
 *  *router.js*中对各模块路由进行配置，在需要显示导航栏的页面路由添加`meta`属性

{
          path: '/Msite', // 首页
          component: Msite,
          meta: {
            showFooter: true
          }
        }

![登录页面][1240 5]

*  去除成功，在回退按钮添加返回`@click="$router.back()"`

## 4. 结束 ##

*  目前为止，页面的布置与路由搭建，基本的框架差不多完成  
    ![目前目录结构][1240 6]

> ##### 接下来就是接入数据阶段了，页面也需要重构 #####

![点个赞呗！][1240 7]

转载于:https://www.cnblogs.com/jry199506/p/11040109.html

[vue_1]: https://www.jianshu.com/p/880f687fdba4
[vue_2]: https://www.jianshu.com/p/1f97678c3170
[vue_3]: https://www.jianshu.com/p/c08cb65ae59c
[vue_4_postman_ajax_vuex]: https://www.jianshu.com/p/7d82d80e42fe
[vue_5]: https://www.jianshu.com/p/7a4bb4397df4
[vue_6_Star]: https://www.jianshu.com/p/f9ed32294bbb
[vue_7]: https://www.jianshu.com/p/9367e150965e
[vue_8]: https://www.jianshu.com/p/8bb98896d0e0
[vue_9]: https://www.jianshu.com/p/813ee551a18a
[vue_10]: https://www.jianshu.com/p/8d43696a168d
[1240]: /images/20211126/d4b5d605689c400b8bb352bb9fb3f4fd.png
[vue-router_route_ _router]: https://www.jianshu.com/p/fa0b5d919615
[1240 1]: /images/20211126/8ddd02401591444e8608e960b0338f3b.png
[1240 2]: /images/20211126/fff5477db955418ca3a81f14f6e6cf6f.png
[1240 3]: /images/20211126/4ec096e686044733acc025b0e369ea81.png
[1240 4]: /images/20211126/6e87165d04e349eaa124aeb24e89db65.png
[Link 1]: https://github.com/surmon-china/vue-awesome-swiper
[1240 5]: /images/20211126/19451338b6994c1396ef8f8a3c6362a9.png
[1240 6]: /images/20211126/cb843a15266448389cea45fb6b2e4885.png
[1240 7]: /images/20211126/925a21a3ad8f48e78044a038fa779b9c.png