slugify 설치-slug 적용

package-lock.json

@@ -10492,6 +10492,11 @@
         "is-fullwidth-code-point": "^2.0.0"
       }
     },
+    "slugify": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.6.tgz",
+      "integrity": "sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ=="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -11977,8 +11982,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -12166,7 +12170,6 @@
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -12267,7 +12270,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -12343,8 +12345,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -12392,7 +12393,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -12431,13 +12431,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },

package.json

@@ -18,6 +18,7 @@
     "js-cookie": "^2.2.1",
     "md5": "^2.2.1",
     "nuxt": "^2.0.0",
+    "slugify": "^1.3.6",
     "vue-material": "^1.0.0-beta-11",
     "vuelidate": "^0.7.4"
   },

pages/headlines/_slug.vue

@@ -0,0 +1,3 @@
+<template>
+  <p>{{ $route.params.slug }}</p>
+</template>

pages/index.vue

@@ -152,7 +152,7 @@
                 <md-button @click="addHeadlineToFeed(headline)" :class="isInFeed(headline.title)" class="md-icon-button">
                   <md-icon>bookmark</md-icon>
                 </md-button>
-                <md-button class="md-icon-button">
+                <md-button @click="saveHeadline(headline)" class="md-icon-button">
                   <md-icon>message</md-icon>
                 </md-button>
               </md-card-actions>
@@ -229,6 +229,9 @@ export default {
     async removeHeadlineFromFeed (headline) {
       await this.$store.dispatch('removeHeadlineFromFeed', headline)
     },
+    saveHeadline (headline) {
+      this.$router.push(`/headlines/${headline.slug}`)
+    },
     async addHeadlineToFeed (headline) {
       if (this.user) {
         await this.$store.dispatch('addHeadlineToFeed', headline)

store/index.js

@@ -1,5 +1,6 @@
 import Vuex from 'vuex'
 import md5 from 'md5'
+import slugify from 'slugify'
 import db from '~/plugins/firestore'
 import { saveUserData, clearUserData } from '~/utils'
 
@@ -44,8 +45,16 @@ const createStore = () => {
       async loadHeadLines ({ commit }, apiUrl) {
         commit('setLoading', true)
         const { articles } = await this.$axios.$get(apiUrl)
+        const headlines = articles.map((article) => {
+          const slug = slugify(article.title, {
+            replacement: '-',
+            remove: /[^a-zA-Z0-9 -]/g
+          })
+          const headline = { ...article, slug }
+          return headline
+        })
         commit('setLoading', false)
-        commit('setHeadLines', articles)
+        commit('setHeadLines', headlines)
       },
       async authenticateUser ({ commit }, userPayload) {
         try {