添加个人专栏

1). 新建专栏首页

在 src/views/articles 下新建 Column.vue 文件，复制贴入以下代码：

src/views/articles/Column.vue

<template>
  <div class="blog-container">
    <div class="blog-pages">
      <!-- 用于渲染『文章列表』和『文章内容』 -->
      <router-view/>

      <div class="col-md-3 main-col pull-left">
        <div class="panel panel-default corner-radius">
          <div class="panel-body text-center topic-author-box blog-info">
            <div class="image blog-cover">
              <router-link :to="`/${userName}`">
                <img :src="userAvatar" class="avatar-112 avatar img-thumbnail">
              </router-link>
            </div>
            <div class="blog-name">
              <h4>
                <router-link :to="`/${userName}`">{{ userName }} 的专栏</router-link>
              </h4>
            </div>
            <hr>
            <router-link :to="`/${userName}`">
              <li class="list-group-item"><i class="text-md fa fa-list-ul"></i> 专栏文章（{{ articleNum }}）</li>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 mapState 辅助函数
import { mapState } from 'vuex'

export default {
  name: 'Column',
  computed: {
    // 将指定的状态混入计算属性
    ...mapState([
      'user',
      'articles'
    ]),
    // 基于 user 返回用户名
    userName() {
      return this.user && this.user.name
    },
    // 基于 user 返回用户头像
    userAvatar() {
      return this.user && this.user.avatar
    },
    // 基于 articles 返回文章数量
    articleNum() {
      return this.articles ? this.articles.length : 0
    }
  }
}
</script>

<style scoped>
.blog-container { margin-top: 20px;}
</style>

现在的页面只有一个侧栏（下一步添加路由后可查看），我们稍后会使用 <router-view/> 渲染『文章列表』和『文章内容』。

 

2). 添加首页路由

打开 src/router/routes.js文件，在数组的最后面，添加 Column 路由：

src/router/routes.js

  // Column
  {
    path: '/:user',
    name: 'Column',
    component: () => import('@/views/articles/Column')
  },

3). 添加专栏入口

打开 src/components/layouts/TheEntry.vue文件，查找编辑资料，在列表项前面添加『个人专栏』：

src/components/layouts/TheEntry.vue

<!-- 个人专栏 -->
<li v-if="user">
  <router-link :to="`/${user.name}`">
    <i class="fa fa-list-ul text-md i-middle"></i>
    个人专栏
  </router-link>
</li>

<li>
  <router-link to="/users/1/edit">
    <i class="fa fa-cog text-md i-middle"></i>
    编辑资料
  </router-link>
</li>

因为要使用用户名作页面跳转，所以我们先使用 v-if="user" 判断是否存在当前用户。