[JavaScript知识库]尚品汇（1）

Header与Footer非路由组件的完成

代码仓库： 周敦十/shangpinhui-zz (gitee.com) 是按照小节commit的

随堂笔记在 笔记文件夹下的 day01.md

周敦十/shangpinhui_0415 - 码云 - 开源中国 (gitee.com) 我 fock的

仓库，在

前台项目_STUDENT(1)/代码/静态页面/谷粒商城-辉洪 需要引用的页面资料都在这个下

我们以 Header 组件为例

这是文件夹结构

Header 页面主体结构部分引用 上述资料文件夹中 的 home.html 的

css 我们使用 less

放到 style 里面，注意指定 lang=“less”, scoped(局部生效，避免污染)，下面给出完整代码

<template>
  <header class="header">
    <!-- 头部的第一行 -->
    <div class="top">
      <div class="container">
        <div class="loginList">
          <p>尚品汇欢迎您！</p>
          <p>
            <span>请</span>
            <a href="###">登录</a>
            <a href="###" class="register">免费注册</a>
          </p>
        </div>
        <div class="typeList">
          <a href="###">我的订单</a>
          <a href="###">我的购物车</a>
          <a href="###">我的尚品汇</a>
          <a href="###">尚品汇会员</a>
          <a href="###">企业采购</a>
          <a href="###">关注尚品汇</a>
          <a href="###">合作招商</a>
          <a href="###">商家后台</a>
        </div>
      </div>
    </div>
    <!--头部第二行 搜索区域-->
    <div class="bottom">
      <h1 class="logoArea">
        <a class="logo" title="尚品汇" href="###" target="_blank">
          <img src="./images/logo.png" alt="" />
        </a>
      </h1>
      <div class="searchArea">
        <form action="###" class="searchForm">
          <input
            type="text"
            id="autocomplete"
            class="input-error input-xxlarge"
          />
          <button class="sui-btn btn-xlarge btn-danger" type="button">
            搜索
          </button>
        </form>
      </div>
    </div>
  </header>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.header {
  & > .top {
    background-color: #eaeaea;
    height: 30px;
    line-height: 30px;

    .container {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      .loginList {
        float: left;

        p {
          float: left;
          margin-right: 10px;

          .register {
            border-left: 1px solid #b3aeae;
            padding: 0 5px;
            margin-left: 5px;
          }
        }
      }

      .typeList {
        float: right;

        a {
          padding: 0 10px;

          & + a {
            border-left: 1px solid #b3aeae;
          }
        }
      }
    }
  }

  & > .bottom {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .logoArea {
      float: left;

      .logo {
        img {
          width: 175px;
          margin: 25px 45px;
        }
      }
    }

    .searchArea {
      float: right;
      margin-top: 35px;

      .searchForm {
        overflow: hidden;

        input {
          box-sizing: border-box;
          width: 490px;
          height: 32px;
          padding: 0px 4px;
          border: 2px solid #ea4a36;
          float: left;

          &:focus {
            outline: none;
          }
        }

        button {
          height: 32px;
          width: 68px;
          background-color: #ea4a36;
          border: none;
          color: #fff;
          float: left;
          cursor: pointer;

          &:focus {
            outline: none;
          }
        }
      }
    }
  }
}
</style>

这里引用到了 图片，我们放到同级的 images 文件夹下面，复制自 资料文件夹的 images 文件夹下

这里需要清除全局样式

在项目的 public 文件夹下添加 资料文件的css reset.css 并且在 public/index.html 中添加引用，添加一行即可

<!-- 引入清楚默认的样式 -->
    <link rel="stylesheet" href="./reset.css">

根组件引用

<template>
  <div id="app">
    <!-- 使用 -->
    <Header></Header>
    我是根组件
    <Footer></Footer>
  </div>
</template>

<script>
// 引入
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  name: 'App',
  // 注册
  components: {
    Header,
    Footer
  }
}
</script>

<style lang="less" scoped>

</style>

主要分为 引入注册使用 三步，比较简单，不做解释

Footer 组件的写法类似，不多说明

最后效果

完成路由组件的搭建

npm i --save vue-router

新建四个页面和路由配置文件

<template>
  <div>我是首页</div>
</template>

<script>
export default {};
</script>

<style>
</style>

其他页面文件类似

路由配置文件

// 配置路由的地方
import Vue from "vue";
import VueRouter from "vue-router";

// 使用插件
Vue.use(VueRouter);
// 引入路由组件
import Home from "@/pages/Home";
import Login from "@/pages/Login";
import Search from "@/pages/Search";
import Register from "@/pages/Register";

// 配置路由
export default new VueRouter({
  // 配置路由
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/search",
      component: Search,
    },
    {
      path: "/login",
      component: Login,
    },
    {
      path: "/register",
      component: Register,
    },

    // 重定向，在项目跑起来的时候，访问/，立马让他 定向到首页
    {
      path: "*",
      redirect: "/home",
    },
  ],
});

main.js 中全局注册

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'
new Vue({
  render: h => h(App),
  // 注册路由：底下的写法 KV 一直省略【router小写的】
  // 注册路由信息：当这里书写router的时候，组件身上都拥有$router, $route属性
  router
}).$mount('#app')

App.vue 中

引入路由占位符

<template>
  <div id="app">
    <!-- 使用 -->
    <Header></Header>
    <!-- 路由组件出口的组件 -->
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

测试 访问 /home 等，页面中间会被替换成指定路由组件

替换 header 组件中 登录 注册 logo还有搜索 这几个地方的路由跳转，前三个使用 声明式编程，最后一个使用编程式实现

<!-- 声明式导航：务必要有 to 属性 -->
<router-link to="/login">登录</router-link>
<router-link class="register" to="/register">免费注册</router-link>


<router-link class="logo" to="/home">
	<img src="./images/logo.png" alt="" />
</router-link>

<button
class="sui-btn btn-xlarge btn-danger"
type="button"
@click="goSearch">
搜索
</button>


// 搜索按钮的回调函数，需要向 search 路由跳转
goSearch() {
	this.$router.push("/search");
},

路由元信息的使用

修改路由配置文件

// 配置路由的地方
import Vue from "vue";
import VueRouter from "vue-router";

// 使用插件
Vue.use(VueRouter);
// 引入路由组件
import Home from "@/pages/Home";
import Login from "@/pages/Login";
import Search from "@/pages/Search";
import Register from "@/pages/Register";

// 配置路由
export default new VueRouter({
  // 配置路由
  routes: [
    {
      path: "/home",
      component: Home,
      meta: { show: true },
    },
    {
      path: "/search",
      component: Search,
      meta: { show: true },
    },
    {
      path: "/login",
      component: Login,
      meta: { show: false },
    },
    {
      path: "/register",
      component: Register,
      meta: { show: false },
    },

    // 重定向，在项目跑起来的时候，访问/，立马让他 定向到首页
    {
      path: "*",
      redirect: "/home",
    },
  ],
});

添加 meta，每个组件的 $route 中会带有元信息，根据这个选择性渲染

<!-- 在Home, Search显示的，在登录，注册隐藏 -->
    <!-- <Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer> -->
    <Footer v-show="this.$route.meta.show"></Footer>

为什么使用路由元信息，因为如果页面较多，一个个的根据 路径判断很麻烦，所以把关于路由的配置放在路由元信息中维护