دورة VUE JS للمبتدئين الدرس الثامن عشر


فهاد الدرس الثامن عشر من دورة vue js للمبتدئين غادي نشوفوا حاجة لي هي مهمة ف vue js لي هي vue router.
ف vue router كيمكن باش نتنقلو مابين أكثر من صفحة عندنا فل projet ديالنا ففهاد الجزء غادي نشوفوا كيفاش نزيدوه ومن بعد غادي نشوفوا كيفاش نخدمو به.


1- إضافة vue router ل projet ديالنا

أول حاجة غادي تزيد projet جديد كيف شفنا قبل ب vue cli سميه vuerouter من بعد دخل ل projet ب cmd وزيد هاد ل commande باش ت installer vue router :

npm  install vue-router

منبعد فاش يتزاد ف dossier components غادي تزيد ملف جديد سميه Login.vue فهاد الملف غادي تكون فيه فورم ديال ل connexion فهي statique يعني مكنتعاملوش مع قاعدة البيانات حيت الهدف هنا هو ن afficher les pages.

الكود ديال Login.vue هو :

                                //Login.vue

<template>
  <div>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto mt-4">
                <div class="card p-3">
                    <h3 class="card-title">Connexion</h3>
                    <hr>
                    <form action="#">
                        <div class="form-group">
                            <input type="text" name="email" placeholder="Email" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="password" name="password" placeholder="Mot de passe" class="form-control">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary">valider</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
                            

2- إضافة component Register.vue ل projet ديالنا

دائما ف dossier components غادي تزيد ملف جديد سميه Register.vue فهاد الملف غادي تكون فيه فورم ديال ل inscription.

الكود ديال Register.vue هو :

                                //Register.vue

<template>
  <div>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto mt-4">
                <div class="card p-3">
                    <h3 class="card-title">Inscription</h3>
                    <hr>
                    <form action="#">
                        <div class="form-group">
                            <input type="text" name="name" placeholder="Nom & Prénom" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" name="email" placeholder="Email" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="password" name="password" placeholder="Mot de passe" class="form-control">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary">valider</button>
                        </div>
                  </form>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
                            

3- استعمال ل vue router ف main.js

غادي نمشي ل main.js أول حاج كنسترجع ل vue-router لي زدت منبعد كنسترجع ل component login & register ثم كنقول ل instance Vue بلي غادي نخدم ب vue router.

منبعد كنزيد constante router لي فيها حددت les routes ديالي فكنعطي ل path لي هو ل url يعني ملي غادي يدخل المستخدم ل :

http://localhost:8080/login غادي نعرض ل component login وفاش يدخل ل http://localhost:8080/register غادي نعرض ل component register.

داخل ل instance Vue كنزيد ل constante router لي زدنا.

الكود لي زدنا ف main.js هو :


                                //main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import Login from './components/Login.vue';
import Register from './components/Register.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  //set route mode to /route instead of /#
  mode : 'history',
  //add routes
  routes : [
      //set path and component to load foreach route
      {path:'/login',component : Login},
      {path:'/register',component : Register}
  ]
});

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

4- إضافة لقائمة ل App.vue

ف App.vue كنزيد ل menu ديالي ولي كانعطي لكل رابط route لي زدت ف main.js ومنبعد كنقول ل app بلي غادي نعرض les routes فهاد ل component بهاد الطريقة :

 <router-view></router-view>

فدبا يلا فتحت ل app ف serveur غادي نلقى هاد النتيجة :




يلا ضغطت على connexion غادي نلقى هاد النتيجة :




يلا ضغطت على inscription غادي نلقى لفورم ديال ل inscription الكود لي زدنا ف App.vue هو :

                                    //App.vue

<template>
    <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Vue Router</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="/register">Inscription <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/login">Connexion</a>
              </li>
            </ul>
          </div>
        </nav>
        <!-- show route components-->
        <router-view></router-view>
    </div>
</template>

<script>

export default {
  name: 'app',
}
</script>

<style>

</style>