How to slug an url using Vuejs

Question

I'm building a website with several articles. I'm using Vue Router, and for the moment the urls of my articles look like /article/id, for example : http://localhost:8080/article/85.

How can I slug an URL with the article title so it can be http://localhost:8080/article/the-article-title for example ?

I have no idea what kind of code should I provide so here is my article route :

routes: [
 {
   path: '/article/:id',
   component: require('../components/articlePage.vue').default,
   name: 'article',
   meta: {title: "article"}
  }, 
]

user_9244057 · Answer

First add a slug in your JSON object if it is not exist in your API or DB

{
  id: 1,
  title: 'Jungle Book',
  slug: 'jungle-book',
  showDate: 'Monday',
  showTime: '19:10 - 20:55'
}

Change the path in your router index file according to your path and component. And the path should have ":slug"

 {
   path: '/movies/:slug',
   name: 'moviedetail',
   component: MovieDetail
}

In the "router-link" add the slug after v-for

Now get the data from your component

 data() {
   return {
      movie: this.$store.state.data,
      movieDetail: []
   }
 },

 methods: {
     getMovie(){
        this.movie.forEach(e => {
           if(e.slug == this.$route.params.slug){
              this.movieDetail = e;
           }
        });
      }
  },

  created() {
     this.getMovie();
  }

user_5355875 · Answer

There are different approaches with increasing level of complexity and aspects taken care of.

So to start - in order to slug-ify articles, you have to introduce slugs to the application. Since it is mentioned in comments that all articles are fetched priorly, slugs can be added to each article data before saving them to store with custom function that converts words to kebab-case or one of helper libraries (e.g. dashify).

This will make possible to render list of article links using :slug as route param, instead of id and search in store for by param before rendering article page. Good thing is that it still possible to keep both options (slug and id) available by extending logic to search by 2 fields.

Depending on your target - that might be it. But the problem arises in case article title has been changed and user accesses article via externally saved link (shared in social media, indexed by search engines, etc). This defeats SEO.

In order to keep article accessible, it is a good practice to include slug as a required field on the back-end. Slug still can be generated with same approach, but in CMS - before article is stored in the database. In such case it can be double checked, manually edited (as slugs do not always represent full article title because of characters length, special symbols, etc) and be accessible for querying, thus removing hassle of string manipulation from the front-end application.

Also this creates options to configure 301 redirects to preserve indexation even after slug is changed by saving old slugs. But such problem is out of the scope of the current question, even though is a good practice.

user_11364583 · Answer

Router:

{
  path: '/:slug',
  name: 'article',
  component: articlePage
}

Component:

use beforeRouteEnter to show the slug

beforeRouteEnter(to, from, next) {
    console.log(to.params.slug);
}

How to slug an url using Vuejs

3 Answers