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

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

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

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

Unpkg.com предоставляет cdn-ссылки на основе npm. Приведенная выше ссылка всегда обновляется до последней версии. Мы можем загрузить и разместить его и использовать с тегом скрипта вместе с 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.

Example

<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>

Output

Чтобы начать с маршрутизации, нам нужно добавить файл 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>

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

<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>' }

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

Затем идет константа routes, которая определяет путь, который будет отображаться в URL-адресе.

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

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

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

Например, <router-link to = ”path here”> </router-link>

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

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

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

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

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

Добавлен класс class = “router-link-exact-active router-link-active”. Активная ссылка получает класс, как показано на скриншоте выше. Еще одно замечание: <router-link> отображается как тег.

Подставки для Router 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-пути name = Tery является частью строки запроса. Например: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery

заменить

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

Example

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

добавить

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

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

Example

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

тег

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

Example

<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, и это то, что отображается в браузере.

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

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

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

<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”. Это результат, отображаемый в браузере.

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

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

Example

<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 является событие click. Мы можем изменить то же самое, используя свойство события.

Example

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

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved