Vue.JS - Маршрутизатор 'history' и 'hash'? - PullRequest
Новая
       8

Vue.JS - Маршрутизатор 'history' и 'hash'?

0 голосов
/ 17 октября 2019

Я работаю на сайте Vue.Js и использую режим по умолчанию для Vue-router "hash". Таким образом, URL сайта выглядит примерно так: 

www.mysite.com/#/Home

Этот сайт уже связан некоторыми мобильными приложениями, и я не могу их изменить. Но у меня есть новое требование, и мне нужно изменить URL-адреса, чтобы удалить хеш (#) из URL-адреса. Поэтому я изменил режим Vue-router на «history», и теперь мой сайт работает без хэша. Вот так: 

www.mysite.com/Home

Проблема в том, что при использовании режима истории URL с хешем (#) не работает. Но для совместимости с мобильными приложениями, связывающими сайт с хэшем, мне все равно нужно, чтобы URL работал с хэшем.

ВОПРОС:

Как использовать режим истории Vue-routerа также поддерживать URL-адреса с работающим хешем?

Я попытался выполнить следующий путь в файле router / index.js: 

export default new Router({
  mode: 'history',
  routes: [
    {
        path: '/Home',
        name: 'Home1',
        component: Home
    },
    {
        path: '/#/Home',
        name: 'Home2',
        component: Home
    },
    ...
]})

Используя эту конфигурацию, URL www.mysite.com/Homeработает, но URL www.mysite.com/#/Home не работает.

1 Ответ

0 голосов
/ 17 октября 2019

Я отвечаю на свой вопрос, основываясь на комментарии @Ohgodwhy и вопрос / ответ с форума vue.js, на который ответил @nathany.

Решение состоит в том, чтобы удалить has (#) из URL-адресов, имеющих хэш, и перенаправить его на URL-адрес без хэша. Это можно сделать с помощью метода router.beforeEach ().

Мой router / index.js выглядит примерно так: 

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

export default new Router({
      mode: 'history',
      routes: [
        {
            path: '/Home',
            name: 'Home',
            component: Home
        },
      ],
})

Затем я изменился на: 

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

var router = new Router({
      mode: 'history',
      routes: [
        {
            path: '/Home',
            name: 'Home',
            component: Home
        },
      ],
})
export default router;

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