Не могу понять, как работает vue-router - PullRequest
Новая
       10

Не могу понять, как работает vue-router

0 голосов
/ 25 октября 2018

У меня есть проект Vue.js со следующим маршрутизатором: 

import Vue from 'vue';
import Router from 'vue-router';
import Overview from '@/components/Overview';
import Experiment from '@/components/ForExperiment';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'test',
    },
    {
      path: '/overview',
      component: Overview,
    },
    {
      path: '/overview/from/:from/to/:to',
      name: 'overview',
      component: Overview,
    },
    //... some other urls goes here.
    {
      path: '/test',
      name: 'test',
      component: Experiment,
    },
  ],
});

Если я открою http://localhost:8080 в браузере, я перенаправлюсь на http://localhost:8080/#/test.Почему не просто http://localhost:8080/test?Откуда взялся символ «#»?

И почему, если я открываю http://localhost:8080/test, меня перенаправляют на http://localhost:8080/test#/test?

И что еще более странно, если я открываю http://localhost:8080/overview Я перенаправлен на http://localhost:8080/overview#/test, поэтому компонент Overview не отображается.

Что может вызвать эти странные эффекты?

Ответы [ 3 ]

0 голосов
/ 25 октября 2018

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

Чтобы избавиться от хеша, мы можем использовать vue-router режим истории.Измените mode следующим образом: 

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

Это использует History API .

Если вы хотите использовать режим истории, вам нужно изменитьконфигурация вашего сервера.В документации Vue Router есть несколько примеров здесь .

0 голосов
/ 25 октября 2018

Маршрутизатор Vue по умолчанию hash режим .Чтобы ваш URL перешел на http://localhost:8080/test, вам нужно перейти в режим history.Это сделано потому, что по умолчанию веб-серверы не настроены на перенаправление всех запросов в один HTML-файл.Режим hash используется для просмотра документов:

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

Измените свой маршрутизатор на этот, чтобы получить режим historyНо вам нужно будет настроить NGINX или Apache2 , чтобы перенаправить все запросы на ваш код vue 

const router = new VueRouter({
  mode: 'history', // Add this to your router
  routes: [...]
})
0 голосов
/ 25 октября 2018

Vue роутер имеет различные режимы .Режим по умолчанию при обнаружении браузера - hash.Текущий маршрут определяется хеш-частью URL.Преимуществом этого подхода является то, что не требуется настройка серверной части.Все URL-адреса указывают на один и тот же ресурс (например, маршрут), который вы можете сделать своим файлом index.html.

Вы можете изменить этот режим на history.Режим истории использует API истории браузера.Он будет работать только в последних браузерах, но поддержка не должна быть проблемой на данный момент.Это также потребует настройки на стороне сервера, так как вам необходимо внутренне переписать URL вашего маршрутизатора в тот же файл.Если вы этого не сделаете, обновление страницы покажет страницу 404 вместо страницы, которую вы хотите увидеть.

...