添加个人专栏

1). 新建专栏首页

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

src/views/articles/Column.vue

 1 <template>
 2   <div class="blog-container">
 3     <div class="blog-pages">
 4       <!-- 用于渲染『文章列表』和『文章内容』 -->
 5       <router-view/>
 6 
 7       <div class="col-md-3 main-col pull-left">
 8         <div class="panel panel-default corner-radius">
 9           <div class="panel-body text-center topic-author-box blog-info">
10             <div class="image blog-cover">
11               <router-link :to="`/${userName}`">
12                 <img :src="userAvatar" class="avatar-112 avatar img-thumbnail">
13               </router-link>
14             </div>
15             <div class="blog-name">
16               <h4>
17                 <router-link :to="`/${userName}`">{{ userName }} 的专栏</router-link>
18               </h4>
19             </div>
20             <hr>
21             <router-link :to="`/${userName}`">
22               <li class="list-group-item"><i class="text-md fa fa-list-ul"></i> 专栏文章（{{ articleNum }}）</li>
23             </router-link>
24           </div>
25         </div>
26       </div>
27     </div>
28   </div>
29 </template>
30 
31 <script>
32 // 引入 mapState 辅助函数
33 import { mapState } from 'vuex'
34 
35 export default {
36   name: 'Column',
37   computed: {
38     // 将指定的状态混入计算属性
39     ...mapState([
40       'user',
41       'articles'
42     ]),
43     // 基于 user 返回用户名
44     userName() {
45       return this.user && this.user.name
46     },
47     // 基于 user 返回用户头像
48     userAvatar() {
49       return this.user && this.user.avatar
50     },
51     // 基于 articles 返回文章数量
52     articleNum() {
53       return this.articles ? this.articles.length : 0
54     }
55   }
56 }
57 </script>
58 
59 <style scoped>
60 .blog-container { margin-top: 20px;}
61 </style>

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

 

2). 添加首页路由

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

src/router/routes.js

1   // Column
2   {
3     path: '/:user',
4     name: 'Column',
5     component: () => import('@/views/articles/Column')
6   },

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" 判断是否存在当前用户。