1). 添加编辑文章路由

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

src/router/routes.js

1   // Edit2   {3     path: '/articles/:articleId/edit',4     name: 'Edit',5     component: () => import('@/views/articles/Create'),6     meta: { auth: true }7   },

我们这里使用了跟 Create 一样的组件页面，但将其路径指向一个新的地址，并命名为 Edit。

2). 添加编辑入口

1、打开 src/views/articles/Content.vue 文件，复制以下代码替换原 <script>：

src/views/articles/Content.vue

1 

2、查找 <div class="markdown-body"，在其后面添加『编辑删除图标』：

1 
     
2 3 
     4 
     
      5   
      
       6     
       7     
       8   
      
9 
     

我们先判断用户是否已登录，已登录且当前用户 ID 为 1 时，渲染编辑删除图标。

3). 添加编辑文章逻辑

打开 src/store/actions.js 文件，复制以下代码替换原 post 事件：

src/store/actions.js

1 export const post = ({ commit, state }, { article, articleId }) => { 2   let articles = state.articles 3  4   if (!Array.isArray(articles)) articles = [] 5  6   if (article) { 7     const uid = 1 8     const { title, content } = article 9     const date = new Date()10 11     if (articleId === undefined) {12       const lastArticle = articles[articles.length - 1]13 14       if (lastArticle) {15         articleId = parseInt(lastArticle.articleId) + 116       } else {17         articleId = articles.length + 118       }19 20       articles.push({21         uid,22         articleId,23         title,24         content,25         date26       })27     }else { // 如果有传 articleId28   // 遍历所有文章29   for (let article of articles) {30     // 找到与 articleId 对应的文章31     if (parseInt(article.articleId) === parseInt(articleId)) {32       // 更新文章的标题33       article.title = title34       // 更新文章的内容35       article.content = content36       break37     }38   }39 }40     commit('UPDATE_ARTICLES', articles)41     router.push({ name: 'Content', params: { articleId, showMsg: true } })42   }43 }

4). 修改创作文章页面

1、打开 src/views/articles/Create.vue 文件，复制以下代码替换原 <script>：

src/views/articles/Create.vue

1 

上面代码的核心就是利用路由参数的 articleId，获取对应的文章数据，来填充编辑页面。在不同的编辑页面之间跳转（如 /articles/1/edit 和 /articles/2/edit）时，因为我们会优先填充自动保存的数据，所以需要先调用 clearData 清空它们。

涉及的新知识点：

1 beforeRouteLeave(to, from, next) {2   this.clearData()3   next()4 }

beforeRouteLeave 是组件内的守卫，在离开该组件的对应路由时调用，此时可以访问 this，需要使用 next() 确认导航。

监听 '$route'：

1 watch: {2   '$route'(to) {3     this.clearData()4     this.setArticleId(to.params.articleId)5   }6 }

我们可以通过监听 '$route' 来得知路由参数的变化，我们通常会在两个路由都渲染相同的组件时监听 '$route'，这是因为 Vue 会复用组件实例，以导致组件内的部分钩子不再被调用。举例来说，我们的『编辑文章』和 『创作文章』都使用 Create.vue 组件，当我们从『编辑文章』导航到『创作文章』时（在编辑文章页面点击创作文章按钮），beforeRouteEnter 就不会被调用，所以我们需要监听 '$route'，以响应路由参数的变化。

2、查找 <h2 class="text-center">，作如下修改：

1 
     2 
创作文章
3 
     4 
{
   { articleId ? '编辑文章' : '创作文章' }}