Учебное пособие по маршрутизации в режиме истории Vue

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

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

Если вы хотите узнать больше о Vue.js, ознакомьтесь с этим Vue JS 2 — Полное руководство (включая Vue Router и Vuex) конечно.
 const router = new VueRouter ({mode: 'history', routes: [...]}) 

При использовании в режиме истории URL будет выглядеть «нормально», например, https://appdividend.com/category/vuejs . Красиво!

Учебник по маршрутизации в режиме истории Vue

Теперь мы устанавливаем Vue.js .

# 1: Установите Vue.js

Нажмите следующую команду, чтобы установить Vue CLI. Пропустите этот шаг, если вы установили Vue CLI.

 npm install -g @ vue/cli # ORyarn global add @ vue/cli 

Теперь создайте новый Vue.js с помощью следующей команды.

 vue create history 

# 2: Установите Vue Router.

Установите vue-router , используя следующую команду.

 yarn add vue-  router # ornpm install vue-router --save 

Теперь настройте маршрутизатор внутри src> > файл main.js .

//main.jsimport Vue from 'vue'import App from' ./App.vue'import VueRouter from 'vue-router'Vue.config  .productionTip = falseconst routes = []; const router = new VueRouter ({mode: 'history', routes: routes}); new Vue ({render: h => h (App), router}). $ mount ('  #app ') 

Здесь мы передали два параметра при создании экземпляра объекта VueRouter.

  1. mode
  2. массив маршрутов

Если мы не определяем какой-либо режим, то по умолчанию , это режим хеширования . Но мы явно указали режим, и это режим history .

Хорошо, теперь нам нужно определить массив маршрутов. Для этого нам нужно создать некоторые компоненты.

# 3: Установить Bootstrap.

Введите следующую команду для установки Bootstrap 4 .

 yarn add bootstrap # ornpm install bootstrap --save 

Добавить файл начальной загрузки в приложение .vue .

 App.vue ... import 'bootstrap/dist/css/bootstrap.min.css'; ... 

# 4: Создание компонентов.

Внутри папки components создайте три компонента.

  1. HomeComponent.vue
  2. DashboardComponent.vue
  3. PostComponent.vue
//HomeComponent.vue  

Это компонент Home

экспорт по умолчанию {}
//DashboardComponent.vue  

Это компонент Dashboard

экспорт по умолчанию {}
// PostComponent.vue  

Это компонент Post

экспорт по умолчанию {}

# 5: Импорт все компоненты внутри файла main.js.

Нам нужно импортировать все компоненты внутри main.js , потому что нам нужны эти компоненты для создания массива и назначения различных маршрутов.

//main.jsimport Vue from 'vue'import App from' ./App.vue'import VueRouter from  'vue-router'Vu  e.use (VueRouter) импортировать HomeComponent из './components/HomeComponent.vue'import DashboardComponent из' ./components/DashboardComponent.vue'import PostComponent из './components/PostComponent.vue'import' bootstrap/dist/css/ bootstrap.min.css '; Vue.config.productionTip = falseconst routes = [{path:' home ', name:' Home ', component: HomeComponent}, {path:' post ', name:' Post ', component:  PostComponent}, {путь: 'панель инструментов', имя: 'Панель мониторинга', компонент: Компонент панели инструментов},]; const router = new VueRouter ({mode: 'history', routes: routes}); new Vue ({render: h =  > h (App), router}). $ mount ('# app') 

Итак, здесь мы назначили каждому компоненту путь и имя . Теперь мы успешно зарегистрировали компоненты с маршрутами.

Добавьте следующий код в файл App.vue .

//App  .vue  
export default {name: 'app'}

Теперь запустите сервер разработки, используя следующую команду.

 npm run serve 

Как видите, режим истории маршрутизации работает отлично. Теперь, когда мы напрямую обращаемся к конкретному маршруту, это не сработает. Для этого сначала вам нужно проверить свой сервер, является ли он apache или nginx .

#Apache

  RewriteEngine On RewriteBase/RewriteRule ^ index  .html $ - [L] RewriteCond% {REQUEST_FILENAME}! -F RewriteCond% {REQUEST_FILENAME}!  -d RewriteRule. /index.html [L]  

#nginx

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

Оцените статью
nanomode.ru
Добавить комментарий