Учебники

VueJS — Маршрутизация

VueJS не имеет встроенного маршрутизатора Feauture. Нам нужно выполнить некоторые дополнительные шаги, чтобы установить его.

Прямая загрузка из CDN

Последняя версия vue-router доступна по адресу https://unpkg.com/vue-router/dist/vue-router.js.

Unpkg.com предоставляет основанные на npm cdn ссылки. Приведенная выше ссылка всегда обновляется до последней версии. Мы можем скачать и разместить его и использовать с тегом script вместе с vue.js следующим образом:

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

Использование NPM

Выполните следующую команду для установки vue-router.

npm  install vue-router

Использование GitHub

Мы можем клонировать репозиторий из GitHub следующим образом:

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

Давайте начнем с простого примера использования vue-router.js.

пример

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

Выход

Route1 Link

Route2 Link

Чтобы начать с маршрутизации, нам нужно добавить файл vue-router.js. Возьмите код из https://unpkg.com/vue-router/dist/vue-router.js и сохраните его в файле vue-router.js.

Сценарий добавляется после vue.js следующим образом:

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

В разделе тела есть ссылка на маршрутизатор, определяемая следующим образом:

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 2</router-link>
</p>

<router-link> — это компонент, используемый для перехода к содержимому HTML, которое будет отображаться пользователю. Свойство to является местом назначения, то есть исходным файлом, в котором будет выбрано содержимое для отображения.

В приведенном выше фрагменте кода мы создали две ссылки на маршрутизатор.

Взгляните на раздел скриптов, где инициализируется маршрутизатор. Есть две константы, созданные следующим образом:

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

У них есть шаблоны, которые должны отображаться при нажатии на ссылку маршрутизатора.

Далее идет маршрут const, который определяет путь для отображения в URL.

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

Маршруты определяют путь и компонент. Путь ie / route1 будет отображаться в URL, когда пользователь нажимает на ссылку маршрутизатора.

Компонент принимает имена шаблонов для отображения. Путь от маршрутов должен совпадать с ссылкой маршрутизатора на свойство.

Например, <router-link to = «путь сюда» > </ router-link>

Затем экземпляр создается в VueRouter с использованием следующего фрагмента кода.

const router = new VueRouter({
   routes // short for `routes: routes`
});

Конструктор VueRouter принимает маршруты в качестве параметра. Объект router назначается основному экземпляру vue с помощью следующего фрагмента кода.

var vm = new Vue({
   el: '#app',
   router
});

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

Маршрут Ссылка

Добавлен класс: «router-link-точно-active router-link-active» . Активная ссылка получает класс, как показано на скриншоте выше. Следует также отметить, что <router-link> отображается как тег.

Реквизит для роутера Link

Давайте посмотрим еще некоторые свойства, которые будут переданы <router-link>.

в

Это путь назначения, указанный для <router-link>. При нажатии значение to будет передано в router.push () внутри. Значение должно быть строкой или объектом местоположения. При использовании объекта нам нужно связать его, как показано, например, в 2.

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

Ниже приводится вывод, например, 3.

Пример маршрутизации

В пути URL имя = Tery является частью строки запроса. Например: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery

замещать

Добавление замены к ссылке на маршрутизатор вызовет router.replace () вместо router.push () . При замене история навигации не сохраняется.

пример

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

присоединять

Добавление append к <router-link> <router-link> сделает путь относительным.

Если мы хотим перейти от ссылки маршрутизатора с путем / маршрута1 к пути / маршруту2 ссылки на маршрутизатор, он будет отображать путь в браузере как / route1 / route2.

пример

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

тег

В настоящее время <router-link> отображается как тег. В случае, если мы хотим отобразить его как какой-то другой тег, нам нужно указать то же самое, используя tag = ”tagname”;

пример

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Мы указали тег как span, и это то, что отображается в браузере.

Тег

Тег, отображаемый сейчас, является тегом span. Мы по-прежнему увидим, как щелчок идет, когда мы нажимаем на ссылку маршрутизатора для навигации.

активный класс

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

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Используемый класс — active_class = ”_active”. Это вывод, отображаемый в браузере.

Активный класс

Точный-активный класс

Применяемый класс по умолчанию activeactive — router-link-точно-active. Мы можем перезаписать его с помощью точного активного класса.

пример

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Это то, что отображается в браузере.

Точный активный класс

событие

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

пример

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

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