close

Routing и Navigation в Vue .js — подробное руководство

Routing и Navigation являются важными концепциями в Vue.js для создания страниц и навигации между ними в веб-приложении. — мощная и гибкая библиотека для управления системой в .js. Vue Router routing Vue

 

Вот основные понятия, связанные с route s в Vue.js:

  1. Route: route определяет путь и связывает его с соответствующим компонентом. У каждого route есть путь и компонент.

  2. Vue Router: это библиотека для управления s в .js. Он предоставляет инструменты для определения и управления s в приложении. Vue Router route Vue route Vue

  3. Route Компонент: у каждого route есть соответствующий компонент. Когда a route активирован, будет отображаться связанный компонент.

  4. Dynamic Route: Dynamic route позволяет вам определять route s с динамическими параметрами. Например, вы можете указать route путь «/user/:id» для отображения информации о пользователе с соответствующим идентификатором.

  5. Вложенный Route: Вложенный route — это концепция, которая позволяет вам вкладывать дочерние route элементы в родительский route. Это позволяет создавать сложные route структуры и организовывать компоненты вложенным образом.

  6. Перенаправление Route: перенаправление route позволяет перенаправлять пользователей с одного пути на другой. Это полезно, когда вы хотите перевести route пользователей со старого пути на новый.

  7. Route Охранник: Охранник route — это функция, которая позволяет вам проверять и контролировать доступ к route s. Используя route защиту, вы можете определить условия, чтобы запретить пользователям доступ к определенным route s или выполнить специальную обработку перед перенаправлением.

 

Чтобы использовать, вы можете выполнить следующие шаги: Vue Router

Шаг 1: Установите с помощью npm или yarn: Vue Router 

npm install vue-router

или 

yarn add vue-router

Шаг 2: Создайте файл в корневом каталоге проекта. В этом файле мы объявим и настроим файлы приложения. router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

Шаг 3: main.js Импортируйте файл и свяжите его с приложением: Vue Router Vue 

import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({
  router,  
  render: h => h(App),  
}).$mount('#app');

Шаг 4: В файле вы можете объявить s, используя такие компоненты, как, и другие свойства. router.js route Vue Router path component

Например, вы можете объявить a route для домашней страницы и route для страницы about следующим образом:

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

Шаг 5: В Vue компонентах вы можете использовать компоненты, например, для создания ссылок на другие файлы и для отображения содержимого текущего файла. <router-link> route <router-view> route

Например, в шаблоне компонента Home можно использовать для создания ссылки на страницу about: <router-link> 

<router-link to="/about">Go to About</router-link>

В шаблоне компонента App вы можете использовать для отображения содержимого текущего: <router-view> route 

<router-view></router-view>

С помощью этих шагов вы настроили и использовали для управления и в своем приложении .js. Vue Router routing navigation Vue