close

Routing και Navigation στο Vue .js- A Comprehensive Guide

Routing και Navigation είναι βασικές έννοιες στο Vue.js για τη δημιουργία σελίδων και την πλοήγηση μεταξύ τους σε μια εφαρμογή web. είναι μια ισχυρή και ευέλικτη βιβλιοθήκη για τη διαχείριση του συστήματος σε .js. Vue Router routing Vue

 

Ακολουθούν οι θεμελιώδεις έννοιες που σχετίζονται με route το s σε Vue.js:

  1. Route: Το A route ορίζει μια διαδρομή και τη συνδέει με ένα αντίστοιχο στοιχείο. Το καθένα route έχει μια διαδρομή και μια συνιστώσα.

  2. Vue Router: είναι μια βιβλιοθήκη για τη διαχείριση s σε .js. Παρέχει εργαλεία για τον ορισμό και τη διαχείριση s σε μια εφαρμογή. Vue Router route Vue route Vue

  3. Route Component: Κάθε ένα route έχει ένα αντίστοιχο στοιχείο. Όταν το a route είναι ενεργοποιημένο, θα εμφανιστεί το σχετικό στοιχείο.

  4. Δυναμική Route: Η δυναμική route σάς επιτρέπει να ορίζετε route s με δυναμικές παραμέτρους. Για παράδειγμα, μπορείτε να ορίσετε το a route με τη διαδρομή "/user/:id" για να εμφανίζονται πληροφορίες χρήστη με το αντίστοιχο αναγνωριστικό.

  5. Ένθετο Route: Το ένθετο route είναι μια έννοια που σας επιτρέπει να φωλιάζετε τα παιδιά route μέσα σε έναν γονέα route. Αυτό σας δίνει τη δυνατότητα να δημιουργήσετε πολύπλοκες route δομές και να οργανώσετε τα στοιχεία με ένθετο τρόπο.

  6. Ανακατεύθυνση Route: Μια ανακατεύθυνση route σάς επιτρέπει να ανακατευθύνετε τους χρήστες από τη μια διαδρομή στην άλλη. Αυτό είναι χρήσιμο όταν θέλετε να μεταφέρετε route χρήστες από μια παλιά διαδρομή σε μια νέα.

  7. Route Φρουρά: Ο route προφυλακτήρας είναι μια λειτουργία που σας επιτρέπει να ελέγχετε και να ελέγχετε την πρόσβαση σε route s. Χρησιμοποιώντας route προστατευτικά, μπορείτε να ορίσετε συνθήκες για να αποτρέψετε την πρόσβαση των χρηστών σε ορισμένα route ή να εκτελέσετε ειδικό χειρισμό πριν από την ανακατεύθυνση.

 

Για να χρησιμοποιήσετε το, μπορείτε να ακολουθήσετε αυτά τα βήματα: Vue Router

Βήμα 1: Εγκαταστήστε χρησιμοποιώντας npm ή νήμα: Vue Router 

npm install vue-router

ή 

yarn add vue-router

Βήμα 2: Δημιουργήστε ένα αρχείο στον ριζικό κατάλογο του έργου. Σε αυτό το αρχείο, θα δηλώσουμε και θα διαμορφώσουμε τα s της εφαρμογής. 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

Για παράδειγμα, μπορείτε να δηλώσετε ένα route για την αρχική σελίδα και ένα route για τη σελίδα σχετικά ως εξής:

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 στοιχεία, μπορείτε να χρησιμοποιήσετε στοιχεία όπως για να δημιουργήσετε συνδέσμους προς άλλα s και να εμφανίσετε το περιεχόμενο του τρέχοντος. <router-link> route <router-view> route

Για παράδειγμα, στο πρότυπο του στοιχείου Αρχική σελίδα, μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε έναν σύνδεσμο προς τη σελίδα σχετικά: <router-link> 

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

Στο πρότυπο του στοιχείου εφαρμογής, μπορείτε να χρησιμοποιήσετε για να εμφανίσετε το περιεχόμενο του τρέχοντος: <router-view> route 

<router-view></router-view>

Με αυτά τα βήματα, έχετε ρυθμίσει και χρησιμοποιείτε για τη διαχείριση και την εφαρμογή σας .js. Vue Router routing navigation Vue