How to slug an url using Vuejs
up vote
3
down vote
favorite
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
add a comment |
up vote
3
down vote
favorite
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
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 providedid
or load multiple articles? Does your API support querying articles byslug
ortitle
?
– 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
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
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
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
vue.js vue-router
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 providedid
or load multiple articles? Does your API support querying articles byslug
ortitle
?
– 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
add a comment |
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 providedid
or load multiple articles? Does your API support querying articles byslug
ortitle
?
– 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
add a comment |
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.
add a comment |
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.
add a comment |
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.
add a comment |
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.
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.
answered Nov 10 at 23:09
aBiscuit
1,2671513
1,2671513
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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 byslug
ortitle
?– 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