Пример маршрутизатора Vue | Как использовать маршрутизацию в VueJS

Учебное пособие по маршрутизатору Vue с примером | Как использовать маршрутизацию в VueJS — это тема сегодняшнего дня. Vue уже является отличной библиотекой Javascript, которая позволяет создавать динамические интерфейсные приложения. Vue.js также отлично подходит для одностраничных приложений (SPA). Vue Router — официальный маршрутизатор для Vue.js.

Он глубоко интегрируется с ядром Vue.js, что упрощает создание одностраничных приложений с Vue.js. Возможности включают:

Вложенное сопоставление маршрута/представления.
Это модульная конфигурация маршрутизатора на основе компонентов.
Параметры маршрута, запрос, подстановочные знаки.
Просмотр эффектов перехода на основе системы перехода Vue.js.
Он имеет детализированный элемент управления навигацией.
Он связывается с автоматическими активными классами CSS.
Он имеет режим истории HTML5 или режим хеширования с автоматическим откатом в IE9.
Это имеет настраиваемое поведение прокрутки.

В веб-приложении JavaScript маршрутизатор является частью, которая синхронизирует текущее отображаемое представление с содержимым адресной строки браузера.

Другими словами, маршрутизация — это часть, которая изменяет URL-адрес, когда вы щелкаете что-либо на странице, и помогает отображать правильный вид или HTML-код при навигации. конкретный URL.

Содержание

Учебное пособие по Vue Router с примером
Шаг 1. Установите Vue Router
Шаг 2. Базовая маршрутизация с Vue.js
Шаг 3. Создание компонентов Vue
Vue HTML 5 History Mode Routing
Динамическая маршрутизация в Vue.js
Объект маршрутизатора Vue
Именованные маршруты в Vue.js
Программное перенаправление в Vue Router
Навигация по истории маршрутизатора с помощью метода Go

Учебное пособие по Vue Router с примером

Сначала мы создаем проект Vue с помощью Vue CLI. Я установил Vue CLI 3.0, и если вы еще не установили, вы можете установить его, введя следующую команду.

 sudo npm install -g @ vue/cli

Приведенную выше команду необходимо выполнить в режиме администратора.

Затем мы можем создать новый проект, набрав следующую команду.

 vue create vueroute

Теперь войдите в проект.

 cd vueroute

Шаг 1. Установите Vue Router

Хотя мы можем установить vue-router по умолчанию, пока мы создавали новый проект, позвольте мне установить отдельно для вас. Так что мы выполним интеграцию самостоятельно.

 npm install vue-router --save

Я установил версию 3.0.2, потому что в настоящее время это это последняя версия. Возможно, вы получите другую версию из будущего.

Теперь вы можете импортировать маршрутизатор внутри приложения Vue.js. Итак, давайте импортируем в файл src >> main.js .

//main.jsimport Vue from 'vue'import VueRouter from' vue-router '  Vue.use (VueRouter)

Шаг 2. Базовая маршрутизация с Vue.js

Внутри src , создайте один файл с именем routes.js и добавьте следующий код.

//routes.jsconst routes = []; экспорт маршрутов по умолчанию  ;

В будущем мы будем определять маршруты внутри этого файла. Теперь нам нужно импортировать этот файл routes.js в файл main.js ..

//main.jsimport Vue из 'vue'; импортировать приложение из './App.vue';import VueRouter из' vue-router '; импортировать маршруты из' ./routes';Vue  .config.productionTip = false; Vue.use (VueRouter); new Vue ({render: h => h (App), routes}). $ mount ('# app');

Итак, мы передали объект маршрутизатора при создании экземпляра vue.

Шаг 3. Создание компонентов Vue

Следующий шаг заключается в создании трех новых компонентов внутри папки src >> components .

Home.vue
Зарегистрироваться .vue
Login.vue

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

//Register.vue   Register 
  export default {}

//Login.vue   Login 
  export default {}

Теперь импортируем все компоненты внутри файла src >> routes.js . Мы определим маршруты для каждого компонента.

//routes.jsimport Home from './components/Home.vue';import Register from' ./components/Register.vue';import Login  из './components/Login.vue';const routes = [{path:'/', component: Home}, {path:'/register ', component: Register}, {path:'/login ', component:  Login},]; экспорт маршрутов по умолчанию;

Следующим шагом является создание экземпляра VueRouter и передача объекта маршрутов. Итак, нам нужно импортировать файл routes.js внутри файла main.js .

//main.jsimport Vue  from 'vue'; импортировать приложение из './App.vue'; импортировать VueRouter из 'vue-router'; импортировать маршруты из './routes';Vue.config.productionTip = false; Vue.use (VueRouter); const  router = new VueRouter ({routes}); new Vue ({router, render: h => h (App)}). $ mount ('# app');

Также нам понадобится для отображения компонентов маршрутизации на основе маршрутов. Таким образом, мы можем сделать это, добавив компонент . Итак, давайте добавим это в файл src >> App.vue .

//App.vue     Главная   Зарегистрироваться   Войти  
  
  export default {}

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

Сохраните этот файл, перейдите в терминал и запустите сервер разработки vue.

 npm run serve

Теперь перейдите на http://localhost: 8080, и ваш URL-адрес изменится на: http://localhost: 8080/# , и он отобразит компонент Home .

Мы использовали хеш-маршрутизацию, которая популярна при создании одностраничных приложений (SPA).

Vue HTML 5 History Mode Routing

Мы используем хэш-режим маршрутизации. Мы также можем использовать HTML 5 History Mode. По умолчанию vue.js использует режим хеширования. Нам нужно сообщить приложению vue извне, что нужно выполнять маршрутизацию истории.

Нам нужно изменить одну строку кода внутри файла main.js , и мы готово.

//main.jsconst router = new VueRouter ({mode: 'history', routes});

Теперь мы можем маршрутизировать компоненты без хеша.

Динамическая маршрутизация в Vue.js

В приведенном выше примере показано другое представление на основе URL-адреса, обработка /, /register и маршрутов.

Мы можем достичь динамического сегмента. Выше были статические сегменты.

Давайте определим еще один маршрут внутри src >> routes.js под названием /student/: id , а также создайте в папке src >> components компонент с именем

// Student.vue   Student 
  export default {}

Теперь импортируйте компонент внутри routes.js и зарегистрируйте этот компонент.

//main.jsimport Home from './components/Home.vue';import Register from' ./components/Register.vue  '; import Login из' ./components/Login.vue';import Student из './components/Student.vue';const routes = [{path:'/', component: Home}, {path:'/register  ', component: Register}, {path:'/login ', component: Login}, {path:'/student/: id ', component: Student},]; экспорт маршрутов по умолчанию;

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

Теперь внутри компонента маршрута ученика мы можем ссылаться на маршрут, используя $ route и доступ id с помощью $ route.params.id . Итак, напишите следующий код внутри файла Student.vue .

//Student.vue   Идентификатор учащегося: {{$ route  .params.id}} 
  экспорт по умолчанию {}

Мы используем маршрутизацию в режиме истории. Итак, перейдите по адресу: http://localhost: 8080/student/4 , и теперь мы можем увидеть этот идентификатор студента на нашей странице.

Мы можем использовать этот параметр id для загрузки содержимого из серверной части. Вы можете иметь столько динамических сегментов, сколько хотите, в одном и том же URL-адресе.

Итак, после вызова метода Vue.use () внутри файл main.js , передающий объект маршрутизатора, в любом компоненте приложения, у которого есть доступ к этим объектам:

this. $ router: который является объектом-маршрутизатором.
this. $ route: which — текущий объект маршрута.

Объект маршрутизатора Vue

Мы может получить доступ к объекту маршрутизатора с помощью this. $ router из любого компонента, когда Vue Router установлен в корневом компоненте Vue и предлагает множество полезных функций.

Мы можем заставить приложение переходить по новому маршруту. используя

this. $ router.push ()
this. $ router.replace ()
this. $ router.go ()

Если вы выполняли операции CRUD ранее, используя Vue.js в качестве интерфейса, то у нас есть u sed метод push () для программного изменения маршрута.

Именованные маршруты в Vue.js

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

Иногда удобнее идентифицировать маршрут по имени, особенно при связывании с маршрут или выполнение навигации. Вы можете дать маршруту имя в параметрах routes при создании экземпляра маршрутизатора. Теперь мы добавим одно свойство с именем name к объекту routes в файле routes.js .

//routes.jsconst routes = [{path: '/', component: Home, name: 'home'}, {path: '/register', component: Register, name: 'register'}  , {path: '/login', component: Login, name: 'login'}, {path: '/student/: id', component: Student, name: 'student'},];

Теперь мы можем изменить ссылки внутри панели навигации в файле App.vue .

//App.vue       Главная  
   Зарегистрироваться  
   Войти  
   Студент  
 
 
  
  экспорт по умолчанию {}

Программное перенаправление в Vue Router

В одностраничном приложении мы часто сталкиваемся с ситуацией, когда нам нужно выполнить перенаправление после успешного выполнения некоторых операций.

Мы можем перенаправить маршрут программно, используя объект маршрутизатора. Например, когда пользователь успешно вошел в систему, нам нужно программно перенаправить на домашний маршрут.

Давайте посмотрим на следующий пример.

Давайте создадим еще один компонент с именем Redirect.vue внутри папки компонентов и добавим следующий код.

//Redirect.vue  
  export default {connected () {this. $ router.push (' /home ');}}

Итак, когда компонент смонтирован, мы перенаправим страницу на компонент Home.

Импортируйте этот компонент. внутри файла routes.js и зарегистрируйтесь.

//main.jsimport Home from './components/Home.vue';import Register from  './components/Register.vue';import Login from' ./components/Login.vue';import Student from './components/Student.vue';import Redirect from' ./components/Redirect.vue';const  routes = [{path: '/', component: Home, name: 'home'}, {path: '/register', component: Register, name: 'register'}, {path: '/login', component:  Логин, имя: 'login'}, {path: '/student/: id', component: Student, name: 'student'}, {path: '/redirect', component: Redirect, name: 'redirect'},  ]; экспортировать маршруты по умолчанию;

Теперь перейдите по этому URL: http://localhost: 8080/redirect и увидите, что мы перенаправляемся на компонент Home .

Навигация по истории маршрутизатора с помощью метода Go

Иногда нам нужно перемещаться вперед и назад программно, используя навигацию по истории маршрутизации. Итак, давайте возьмем пример страницы 4o4.

Давайте создадим компонент внутри папки components под названием 404.vue и добавим следующий код.

//404.vue   Упс 404 !!  Страница недоступна.   Вернуться  
  экспорт по умолчанию {методы: {back () {this. $ router.go (  -1);  }}}

Итак, здесь мы определили страницу 404 , а затем поместили ссылку, которая будет перенаправлять на предыдущий маршрут.

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

Теперь импортируйте в файл routes.js .

//routes.jsimport Home from './components/Home.vue';  Импортировать регистр из './components/Register. vue '; import Login из' ./components/Login.vue';import Student from './components/Student.vue';import Redirect from' ./components/Redirect.vue';import Error from './components/ 404.vue '; const routes = [{path:'/', component: Home, name:' home '}, {path:'/register ', component: Register, name:' register '}, {path:' /login ', компонент: Login, имя:' login '}, {path:'/student/: id ', component: Student, name:' student '}, {path:'/redirect ', component: Redirect, name  : 'redirect'}, {path: '/404', component: Error, name: '404'},]; экспорт маршрутов по умолчанию;

Теперь перейдите в http ://localhost: 8080/404, и вы увидите ссылку на предыдущую страницу.

Щелкните эту ссылку, и вы перейдете на последнюю страницу. Итак, он работает и программно.

Наконец, пример Vue Router | Как использовать маршрутизацию в VueJS закончено.