How to slug an url using Vuejs











up vote
3
down vote

favorite
1












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"}
},
]









share|improve this question






















  • Once user enters /article/85, how do you fetch article data and where is it stored?
    – aBiscuit
    Nov 10 at 22:12










  • It is stored in a Vuex Store, I fetch the data from an API with an action, and I use a mutation to call this from a component
    – Arkaer
    Nov 10 at 22:18












  • Do you fetch a single article with provided id or load multiple articles? Does your API support querying articles by slug or title?
    – aBiscuit
    Nov 10 at 22:21










  • I fetch all the articles and I sort by id if I want to display only one with article/:id ; I think the API supports this
    – Arkaer
    Nov 10 at 22:35















up vote
3
down vote

favorite
1












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"}
},
]









share|improve this question






















  • Once user enters /article/85, how do you fetch article data and where is it stored?
    – aBiscuit
    Nov 10 at 22:12










  • It is stored in a Vuex Store, I fetch the data from an API with an action, and I use a mutation to call this from a component
    – Arkaer
    Nov 10 at 22:18












  • Do you fetch a single article with provided id or load multiple articles? Does your API support querying articles by slug or title?
    – aBiscuit
    Nov 10 at 22:21










  • I fetch all the articles and I sort by id if I want to display only one with article/:id ; I think the API supports this
    – Arkaer
    Nov 10 at 22:35













up vote
3
down vote

favorite
1









up vote
3
down vote

favorite
1






1





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"}
},
]









share|improve this 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"}
},
]






vue.js vue-router






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 22:10









Arkaer

211




211












  • Once user enters /article/85, how do you fetch article data and where is it stored?
    – aBiscuit
    Nov 10 at 22:12










  • It is stored in a Vuex Store, I fetch the data from an API with an action, and I use a mutation to call this from a component
    – Arkaer
    Nov 10 at 22:18












  • Do you fetch a single article with provided id or load multiple articles? Does your API support querying articles by slug or title?
    – aBiscuit
    Nov 10 at 22:21










  • I fetch all the articles and I sort by id if I want to display only one with article/:id ; I think the API supports this
    – Arkaer
    Nov 10 at 22:35


















  • Once user enters /article/85, how do you fetch article data and where is it stored?
    – aBiscuit
    Nov 10 at 22:12










  • It is stored in a Vuex Store, I fetch the data from an API with an action, and I use a mutation to call this from a component
    – Arkaer
    Nov 10 at 22:18












  • Do you fetch a single article with provided id or load multiple articles? Does your API support querying articles by slug or title?
    – aBiscuit
    Nov 10 at 22:21










  • I fetch all the articles and I sort by id if I want to display only one with article/:id ; I think the API supports this
    – Arkaer
    Nov 10 at 22:35
















Once user enters /article/85, how do you fetch article data and where is it stored?
– aBiscuit
Nov 10 at 22:12




Once user enters /article/85, how do you fetch article data and where is it stored?
– aBiscuit
Nov 10 at 22:12












It is stored in a Vuex Store, I fetch the data from an API with an action, and I use a mutation to call this from a component
– Arkaer
Nov 10 at 22:18






It is stored in a Vuex Store, I fetch the data from an API with an action, and I use a mutation to call this from a component
– Arkaer
Nov 10 at 22:18














Do you fetch a single article with provided id or load multiple articles? Does your API support querying articles by slug or title?
– aBiscuit
Nov 10 at 22:21




Do you fetch a single article with provided id or load multiple articles? Does your API support querying articles by slug or title?
– aBiscuit
Nov 10 at 22:21












I fetch all the articles and I sort by id if I want to display only one with article/:id ; I think the API supports this
– Arkaer
Nov 10 at 22:35




I fetch all the articles and I sort by id if I want to display only one with article/:id ; I think the API supports this
– Arkaer
Nov 10 at 22:35












1 Answer
1






active

oldest

votes

















up vote
1
down vote













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 back-end. Slug still can be generated with same approach, but in CMS - before article is stored in 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 front-end.



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






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243924%2fhow-to-slug-an-url-using-vuejs%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote













    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 back-end. Slug still can be generated with same approach, but in CMS - before article is stored in 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 front-end.



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






    share|improve this answer

























      up vote
      1
      down vote













      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 back-end. Slug still can be generated with same approach, but in CMS - before article is stored in 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 front-end.



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






      share|improve this answer























        up vote
        1
        down vote










        up vote
        1
        down vote









        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 back-end. Slug still can be generated with same approach, but in CMS - before article is stored in 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 front-end.



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






        share|improve this 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 back-end. Slug still can be generated with same approach, but in CMS - before article is stored in 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 front-end.



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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 10 at 23:09









        aBiscuit

        1,2671513




        1,2671513






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243924%2fhow-to-slug-an-url-using-vuejs%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Full-time equivalent

            さくらももこ

            13 indicted, 8 arrested in Calif. drug cartel investigation