Vue History Mode – Support Legacy Hash URLs
Tags: languages, vue, frontend, javascript
Published: 2020-07-19 12:27:05

---
title: Vue History Mode – Support Legacy Hash URLs
published: true
date: 2020-07-15 12:45:45 UTC
tags: Languages,Vue,frontend,javascript
canonical_url: https://qvault.io/2020/07/15/vue-history-mode-support-legacy-hash-urls/
---

 ![history in library busts](https://qvault.io/wp-content/uploads/2020/07/history-300x200.jpeg)

The post [Vue History Mode – Support Legacy Hash URLs](https://qvault.io/2020/07/15/vue-history-mode-support-legacy-hash-urls/) appeared first on [Qvault](https://qvault.io).

When we first launched the Qvault single-page-app, we were using [Vue Router’s](https://router.vuejs.org/) default hash routing. Hash routing looks ugly to the end-user, and when you want to be able to share parts of your app via direct link those hashes can get really annoying.

We have since moved to the newer [HTML5 History Mode](https://router.vuejs.org/guide/essentials/history-mode.html) which doesn’t have that obnoxious hash in the route. We had a bit of trouble coming up with a clean way to redirect those old hash routes to the new ones, however, so now that we’ve solved it we will share our findings.

At the time of writing we have the following routes, you probably have something similar:

```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Courses from '../views/Courses.vue';
import CourseProduct from '../views/CourseProduct.vue';
import Profile from '../views/Profile.vue';
import Exercise from '../views/Exercise.vue';
import Store from '../views/Store.vue';
import Certificates from '../views/Certificates.vue';
import Dashboard from '../views/Dashboard.vue';
import Certificate from '../views/Certificate.vue';
import Login from '../views/Login.vue';
import Playground from '../views/Playground.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    children: [
      {
        path: 'courses',
        name: 'Courses',
        component: Courses
      },
      {
        path: 'course_product/:courseUUID',
        name: 'CourseProduct',
        component: CourseProduct
      },
      {
        path: 'exercise/:courseUUID/:moduleUUID?',
        name: 'Exercise',
        component: Exercise
      },
      {
        path: 'store',
        name: 'Store',
        component: Store
      },
      {
        path: 'profile',
        name: 'Profile',
        component: Profile
      },
      {
        path: 'certificates',
        name: 'Certificates',
        component: Certificates
      }
    ]
  },
  {
    path: '/certificate/:userUUID/:courseUUID',
    name: 'Certificate',
    component: Certificate
  },
  {
    path: '/playground/:lang',
    name: 'Playground',
    component: Playground
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;
```

Our goal is to redirect all of our old hash based (#) routes to the new non-hash versions. For example:

[classroom.qvault.io/#/playground/go](https://classroom.qvault.io/playground/go) –> [classroom.qvault.io/playground/go](https://classroom.qvault.io/playground/go)

All we do is add the following to our router:

```javascript
// Redirect if path begins with a hash (ignore hashes later in path)
router.beforeEach((to, from, next) => {
  // Redirect if fullPath begins with a hash (ignore hashes later in path)
  if (to.fullPath.substr(0, 2) === '/#') {
    const path = to.fullPath.substr(2);
    next(path);
    return;
  }
  next();
});
```

The full code:

```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Courses from '../views/Courses.vue';
import CourseProduct from '../views/CourseProduct.vue';
import Profile from '../views/Profile.vue';
import Exercise from '../views/Exercise.vue';
import Store from '../views/Store.vue';
import Certificates from '../views/Certificates.vue';
import Dashboard from '../views/Dashboard.vue';
import Certificate from '../views/Certificate.vue';
import Login from '../views/Login.vue';
import Playground from '../views/Playground.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    children: [
      {
        path: 'courses',
        name: 'Courses',
        component: Courses
      },
      {
        path: 'course_product/:courseUUID',
        name: 'CourseProduct',
        component: CourseProduct
      },
      {
        path: 'exercise/:courseUUID/:moduleUUID?',
        name: 'Exercise',
        component: Exercise
      },
      {
        path: 'store',
        name: 'Store',
        component: Store
      },
      {
        path: 'profile',
        name: 'Profile',
        component: Profile
      },
      {
        path: 'certificates',
        name: 'Certificates',
        component: Certificates
      }
    ]
  },
  {
    path: '/certificate/:userUUID/:courseUUID',
    name: 'Certificate',
    component: Certificate
  },
  {
    path: '/playground/:lang',
    name: 'Playground',
    component: Playground
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

// Redirect if path begins with a hash (ignore hashes later in path)
router.beforeEach((to, from, next) => {
  // Redirect if fullPath begins with a hash (ignore hashes later in path)
  if (to.fullPath.substr(0, 2) === '/#') {
    const path = to.fullPath.substr(2);
    next(path);
    return;
  }
  next();
});

export default router;
```

## Thanks For Reading

Follow us on Twitter [@q\_vault](https://twitter.com/q_vault) if you have any questions or comments

Take game-like coding courses on [Qvault Classroom](https://classroom.qvault.io/#/)

[Subscribe](https://mailchi.mp/5c7f5c281bbe/qvault-newsletter-subscribe) to our Newsletter for more educational articles

## Related Articles

- [How to Re-Render a Vue Route When Path Params Change](https://qvault.io/2020/07/07/how-to-rerender-a-vue-route-when-path-parameters-change/)
- [How to Make a Custom Select Component in Vue](https://qvault.io/2019/09/09/how-to-make-a-custom-select-component-in-vue-js/)

The post [Vue History Mode – Support Legacy Hash URLs](https://qvault.io/2020/07/15/vue-history-mode-support-legacy-hash-urls/) appeared first on [Qvault](https://qvault.io).