diff --git a/src/gatsby-node.js b/src/gatsby-node.js
index 4f7af36..4d4119d 100644
--- a/src/gatsby-node.js
+++ b/src/gatsby-node.js
@@ -69,9 +69,21 @@ exports.onCreatePage = async ({ page, actions }, pluginOptions) => {
     }
   }
 
+  // Return all languages slug for this page
+  const getSlugs = (path) => {
+    const currentPage = page.path.replace(/\//g, "")
+    var slugs = {}
+    languages.forEach(language => {
+      var messages = getMessages(path, language)
+      slugs[language] = messages[`${currentPage}.slug`] ? `/${messages[currentPage + '.slug']}` : `/${currentPage}`
+    })
+    return slugs
+  }
+
   const generatePage = (routed, language) => {
     const messages = getMessages(path, language)
-    const newPath = routed ? `/${language}${page.path}` : page.path
+    const slugs = getSlugs(path);
+    var newPath = routed ? `/${language}${slugs[language]}` : `${slugs[language]}`
     return {
       ...page,
       path: newPath,
@@ -81,6 +93,7 @@ exports.onCreatePage = async ({ page, actions }, pluginOptions) => {
         intl: {
           language,
           languages,
+          slugs,
           messages,
           routed,
           originalPath: page.path,
diff --git a/src/link.js b/src/link.js
index 93197ac..13d3f44 100644
--- a/src/link.js
+++ b/src/link.js
@@ -3,11 +3,19 @@ import PropTypes from "prop-types"
 import { Link as GatsbyLink, navigate as gatsbyNavigate } from "gatsby"
 import { IntlContextConsumer } from "./intl-context"
 
+const getLink = (language, to, routed, messages) => {
+  const currentPage = to.replace(/\//g, "")
+  const slugTo = messages[`${currentPage}.slug`] ? messages[`${currentPage}.slug`] : to
+  const link = routed || language ? `/${language}/${slugTo}` : `${slugTo}`
+
+  return link;
+}
+
 const Link = ({ to, language, children, onClick, ...rest }) => (
   <IntlContextConsumer>
     {intl => {
       const languageLink = language || intl.language
-      const link = intl.routed || language ? `/${languageLink}${to}` : `${to}`
+      const link = getLink(languageLink, to, intl.routed, intl.messages)
 
       const handleClick = e => {
         if (language) {
@@ -44,8 +52,8 @@ export const navigate = (to, options) => {
     return
   }
 
-  const { language, routed } = window.___gatsbyIntl
-  const link = routed ? `/${language}${to}` : `${to}`
+  const { language, routed, messages } = window.___gatsbyIntl
+  const link = getLink(language, to, routed, messages)
   gatsbyNavigate(link, options)
 }
 
@@ -53,29 +61,10 @@ export const changeLocale = (language, to) => {
   if (typeof window === "undefined") {
     return
   }
-  const { routed } = window.___gatsbyIntl
-
-  const removePrefix = pathname => {
-    const base =
-      typeof __BASE_PATH__ !== `undefined` ? __BASE_PATH__ : __PATH_PREFIX__
-    if (base && pathname.indexOf(base) === 0) {
-      pathname = pathname.slice(base.length)
-    }
-    return pathname
-  }
-
-  const removeLocalePart = pathname => {
-    if (!routed) {
-      return pathname
-    }
-    const i = pathname.indexOf(`/`, 1)
-    return pathname.substring(i)
-  }
+  const { slugs } = window.___gatsbyIntl
 
-  const pathname =
-    to || removeLocalePart(removePrefix(window.location.pathname))
   // TODO: check slash
-  const link = `/${language}${pathname}${window.location.search}`
+  const link = `/${language}${slugs[language]}${window.location.search}`
   localStorage.setItem("gatsby-intl-language", language)
   gatsbyNavigate(link)
 }