Vue маршрутизация прерывается, если URL не содержит хеш (входной файл не указан) - PullRequest
Новая
       104

Vue маршрутизация прерывается, если URL не содержит хеш (входной файл не указан)

0 голосов
/ 11 ноября 2019

Мне нужно запустить маршрутизатор Vue в режиме по умолчанию (он же, режим хэша, он не может запустить его в режиме history). В этом режиме все мои динамические маршруты содержат ведущие, например http://myurl.com/#/highlights. Однако, если вы удалите этот ведущий хеш, например (http://myurl.com/highlights), сайт сломается (выдает ошибку no input file specified).

Моя цель - убедиться, что ни одно из соответствующих условий маршрутизации не выполнено, и пользователь не аутентифицирован, что пользователь перенаправлен на экран входа в систему, и если они аутентифицированы, но не найдено ни одного маршрута, ониперенаправлены на домашнюю страницу.

Вот мой router.js: 


import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Programs from './views/Programs.vue'
import Sizzle from './views/Sizzle.vue'
import Login from './views/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: {
        name: "login"
      }
    },
    {
      path: "/login",
      name: "login",
      component: Login,
    },
    {
      path: '/highlights/:slug?',
      name: 'home',
      component: Home,
      props: (route) => ({ slug: route.params.slug || categories[0].slug })
    },
    {
      path: '*',
      redirect: {
        name: "login"
      }
    }
  ]
})

* Обратите внимание, что categories - это переменная javascript, которую я создаю глобально с помощью тега script перед любым Vue.jsфайлы загружены.

Ответы [ 2 ]

0 голосов
/ 11 ноября 2019

Чтобы избавиться от хеша, мы можем использовать режим истории маршрутизатора, который использует API history.pushState для достижения URL-навигации без перезагрузки страницы: 

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

, чтобы избежать ошибки при использовании историиРежим. Вам нужна правильная конфигурация сервера,

Пример конфигурации сервера

Apache 

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nignx 

location / {
  try_files $uri $uri/ /index.html;
}

Для получения дополнительной информации. посетите документы https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

0 голосов
/ 11 ноября 2019

Как говорится в официальных документах, режимом по умолчанию для vue-router является режим хэширования - он использует хеш URL для имитации полного URL, чтобы страница не перезагружалась при изменении URL.

Когда вы используете режим истории, без правильной конфигурации сервера, пользователи получат ошибку 404, если они получат доступ к http://myurl.com/highlights непосредственно в своем браузере.

Итак, все, что вам нужно сделать, это добавить простую ловушкузапасной маршрут к вашему серверу. Если URL-адрес не соответствует никаким статическим ресурсам, он должен обслуживать ту же страницу index.html, в которой находится ваше приложение.

Для получения дополнительной информации о конфигурации сервера вы можете просмотреть это - example-server-конфигурации

...