close

Routing oraz Navigation w Vue .js — obszerny przewodnik

Routing i Navigation są podstawowymi pojęciami w Vue.js do tworzenia stron i poruszania się między nimi w aplikacji internetowej. to potężna i elastyczna biblioteka do zarządzania systemem w .js. Vue Router routing Vue

 

Oto podstawowe pojęcia związane z route s w Vue.js:

  1. Route: A route definiuje ścieżkę i łączy ją z odpowiednim komponentem. Każdy route ma ścieżkę i komponent.

  2. Vue Router: to biblioteka do zarządzania s w .js. Zapewnia narzędzia do definiowania i zarządzania s w aplikacji. Vue Router route Vue route Vue

  3. Route Komponent: Każdy route ma odpowiedni komponent. Gdy a route jest aktywowane, zostanie wyświetlony powiązany komponent.

  4. Dynamiczny Route: Dynamiczny route umożliwia zdefiniowanie route s z parametrami dynamicznymi. Na przykład możesz zdefiniować a route ze ścieżką „/user/:id”, aby wyświetlić informacje o użytkowniku z odpowiednim identyfikatorem.

  5. Zagnieżdżone Route: Zagnieżdżone route to koncepcja, która pozwala na zagnieżdżanie dzieci route w rodzicu route. Umożliwia to budowanie złożonych route struktur i organizowanie komponentów w sposób zagnieżdżony.

  6. Przekierowanie Route: Przekierowanie route umożliwia przekierowanie użytkowników z jednej ścieżki do drugiej. Jest to przydatne, gdy chcesz przenieść route użytkowników ze starej ścieżki na nową.

  7. Route Strażnik: Strażnik route to funkcja, która pozwala sprawdzać i kontrolować dostęp do route s. Używając route strażników, możesz zdefiniować warunki, aby uniemożliwić użytkownikom dostęp do niektórych route wiadomości lub wykonać specjalną obsługę przed przekierowaniem.

 

Aby użyć, możesz wykonać następujące kroki: Vue Router

Krok 1: Zainstaluj za pomocą npm lub przędzy: Vue Router 

npm install vue-router

Lub 

yarn add vue-router

Krok 2: Utwórz plik w katalogu głównym projektu. W tym pliku zadeklarujemy i skonfigurujemy s aplikacji. 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;

Krok 3: W main.js pliku zaimportuj go i połącz z aplikacją: 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');

Krok 4: W pliku możesz zadeklarować s używając komponentów takich jak, i innych właściwości. router.js route Vue Router path component

Na przykład możesz zadeklarować a route dla strony głównej i a route dla strony about w następujący sposób:

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

Krok 5: W Vue komponentach możesz używać komponentów, takich jak tworzenie linków do innych s i wyświetlanie zawartości bieżącego pliku. <router-link> route <router-view> route

Na przykład w szablonie komponentu Strona główna możesz użyć do utworzenia łącza do strony z informacjami: <router-link> 

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

W szablonie komponentu aplikacji możesz użyć do wyświetlenia zawartości bieżącego: <router-view> route 

<router-view></router-view>

Dzięki tym krokom skonfigurowałeś i używasz do zarządzania i w swojej aplikacji .js. Vue Router routing navigation Vue