Режим истории Vue — поддержка устаревших URL-адресов хэшей

Пост Режим истории Vue — поддержка URL-адресов старых хэшей впервые появился на Qvault.

Когда мы впервые запустили одностраничное приложение Qvault, мы использовали хэш-маршрутизацию Vue Router по умолчанию. Маршрутизация хэшей выглядит уродливо для конечного пользователя, и когда вы хотите иметь возможность делиться частями своего приложения по прямой ссылке, эти хэши могут сильно раздражать.

С тех пор мы перешли на более новый Режим истории HTML5, в маршруте которого нет этого неприятного хэша. Однако у нас возникли некоторые проблемы с поиском чистого способа перенаправления этих старых хеш-маршрутов на новые, поэтому теперь, когда мы решили эту проблему, мы поделимся нашими выводами.

На момент написания у нас есть следующие маршруты, у вас наверняка есть что-то похожее:

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;

Наша цель — перенаправить все наши старые маршруты на основе хеша (#) на новые версии без хэша. Например:

classroom.qvault.io/#/playground/go –› classroom.qvault.io/playground/go

Все, что мы делаем, это добавляем следующее к нашему маршрутизатору:

// 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();
});

Полный код:

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;

Спасибо за чтение

Подпишитесь на нас в Твиттере @q_vault, если у вас есть какие-либо вопросы или комментарии

Пройдите игровые курсы кодирования в Qvault Classroom

Подпишитесь на нашу рассылку, чтобы получать больше образовательных статей

Статьи по Теме

• Как перерендерить маршрут Vue при изменении параметров пути
• Как создать собственный компонент выбора в Vue

Пост Режим истории Vue — поддержка URL-адресов старых хэшей впервые появился на Qvault.