阳光沙滩
让学习编程变得简单
Vue服务端渲染技术SSR-路由
发表于 2020-01-08    阅读次数 465

Vue服务端渲染技术SSR-路由

上一篇文章

Nuxt.js,Vue服务端渲染技术SSR

前面我们使用了手脚架,快速地创建了项目,接下来我们就看一下路由。

项目结果目录说明

图片描述

  • assets 资产,资源目录。资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
  • components 组件。组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性。
  • layouts 布局,可以理解为了页面结构
  • middleware middleware 目录用于存放应用的中间件。
  • node_modules 依赖库
  • pages 页面内容
  • plugins 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
  • static 静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。
  • store store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个 index.js 文件可激活这些配置。

其他的文件稍微看一下就知道什么内容了。结构不改,改里面的内容即可。

默认页面,首页

我们先把首页整好吧

default.vue

<template>
  <div>
    <!--头部-->
    <div id="sob-header">
      <div id="header-bar">
      </div>
      <div class="left-part-container">
        <div id="sob-left-part">
          <div class="header-part">
            <div class="logo-part">
              <div class="header-title">
                阳光沙滩
              </div>
              <div class="slogan">
                让学习编程变得简单
              </div>
            </div>
            <div class="navigation-part">
              <ul>
                <li><span class="iconfont icon-ybbindex"></span> 首页</li>
                <li><span class="iconfont icon-19guanyuruanjian"></span> 关于</li>
                <li><span class="iconfont icon-link"></span> 友链</li>
                <li><span class="iconfont icon-label"></span> 标签</li>
              </ul>
            </div>
          </div>
          <div class="user-info">
            <div class="left-avatar">
              <img src="~/assets/imgs/avatar.jpg">
            </div>
            <div class="left-name">
              <span>程序猿拉大锯</span>
            </div>
            <div class="left-description">
              <span>三界之内没有我解不了的bug<br>如果有,那一定是三界之外的</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--头部-end-->
    <!--内容-->
    <nuxt/>
    <!--内容-->
    <!--尾部-->
    <div id="sob-footer">
      <div class="bottom-container">
        <div class="info">
          <span>关于SOB</span>
          <span>|</span>
          <span>联系我们</span>
          <span>|</span>
          <span>友情链接</span>
        </div>
        <div id="beian">
          <a href="http://beian.miit.gov.cn/" target="_blank">粤ICP备14093694号</a>
        </div>
      </div>
    </div>
    <!--尾部end-->
  </div>
</template>
<script>
  export default {}
</script>
<style>

  .navigation-part ul {
    line-height: 2;
    padding: 10px 0;
    list-style: none;
  }

  .navigation-part span {
    line-height: 2;
    font-size: 16px;
    font-weight: 600;
    margin-right: 10px;
  }

  .navigation-part li {
    cursor: pointer;
    padding: 5px 20px;
    font-size: 14px;
    color: #555;
  }

  .navigation-part li:hover {
    background: #F5F5F5;
  }

  .user-info {
    width: 280px;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.06), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .user-info .left-name {
    line-height: 2;
    font-size: 16px;
    font-weight: 600;
    color: #222;
  }

  .left-description {
    font-size: 13px;
    line-height: 2;
    color: #999;
  }

  .left-avatar img {
    width: 100px;
    border-radius: 50%;
    height: 100px;
  }

  .header-part {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.06), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .logo-part {
    background: #0084ff;
    height: 120px;
  }

  .header-part .header-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 50px;
  }

  .slogan {
    line-height: 30px;
  }

  .header-part .header-title, .slogan {
    text-align: center;
    color: #fff;
  }

  .left-part-container {
    width: 1140px;
    margin: 0 auto;
  }

  .clear-fix {
    overflow: auto;
    zoom: 1;
  }

  .info {
    padding: 10px;
    color: #999;
  }

  #sob-left-part {
    float: left;
    width: 280px;
  }

  *, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  #header-bar {
    background: #0084ff;
    height: 4px;
    width: 100%;
  }


  #sob-footer {
    margin-top: 50px;
    padding-top: 20px;
    border-top: #eee solid 1px;
    margin-bottom: 50px;
  }

  .bottom-container {
    width: 1140px;
    margin: 0 auto;
    text-align: center;
  }
</style>


index.vue

<template>
  <div id="sob-main-content">
    <div class="content-container">

    </div>
  </div>
</template>

<script>

</script>

<style>
  #sob-main-content {
    width: 1140px;
    margin: 0 auto;
  }

  .content-container {
    width: 855px;
    margin-left: 285px;
    height: 700px;
    background: #7f828b;
  }
</style>


效果如图:

图片描述

基本的架子就搭建好了,接下来我们看看路由吧。

 <div class="navigation-part">
              <ul>
                <li>
                  <router-link to="/">
                    <span class="iconfont icon-ybbindex"></span> 首页
                  </router-link>
                </li>
                <li>
                  <router-link to="about">
                    <span class="iconfont icon-19guanyuruanjian"></span> 关于
                  </router-link>
                </li>
                <li>
                  <router-link to="friends">
                    <span class="iconfont icon-link"></span> 友链
                  </router-link>
                </li>
                <li>
                  <router-link to="/label">
                    <span class="iconfont icon-label"></span> 标签
                  </router-link>
                </li>
              </ul>
            </div>

在我们的侧栏,有这样的链接。当我们点击的时候,要做出页面切换。

使用路由就可以实现这样的功能。

路由

什么是路由呢?路由器?

如果做过vue.js的同学就知道路由了。其实就是把路径指向对应的页面,如果有必要的话顺便带些参数。

比如说我们点击侧边的首页,就显示首页,点击关于,就显示关于界面,点击友链,就显示友链页面。

步骤

  • 在pages目录下创建文件夹,文件夹名称为路由地址的名称。比如说:

/about

那么就在pages目录下创建文件夹about

  • 在文件夹下创建index.vue文件

创建的index.vue,就是被渲染的目标文件了。

图片描述

到这里,我们就可以根据左边的tab切换右边的内容了。