1). 新建专栏首页

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

src/views/articles/Column.vue

1 
     30 31 58 59 

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

 

2). 添加首页路由

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

src/router/routes.js

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

3). 添加专栏入口

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

src/components/layouts/TheEntry.vue

     
  
          
           个人专栏  
      
  
          
           编辑资料  
      

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