Cara Melakukan Konfigurasi Nested Router Menggunakan Laravel dan Vue.js

Di bahan sebelumnya kita telah membangun file-file yang
kita butuhkan bagi membangun Nested
Router bagi melihat bahan sebelum nyateman-teman dapat klik di link https://kursuswebprogramming.com/cara-membuat-nested-router-menggunakan-laravel-dan-vue-js/
di bahan Cara Mengerjakan Konfigurasi
Nested Router Menggunakan Laravel dan Vue.js kali ini kita akan mengerjakan
konfigurasi bagi mengerjakan Nested
Routernya.

Langkah pertama-tama silahkan teman-teman buka file router.js,
di file router.js tersebut nantinya akan tersimpan segala router-router yang
kita bikin, yang berfungsi bagi menghendel atau menghubungkan segala component
vue.js.

Bagi menghubungkan file tersebut silahkan teman-teman buka file router.js kita akan import package dan file component yang akan kita gunakan bagi scriptnya seperti dibawah ini :

import Vue from ‘vue’<br />
import Router from ‘vue-router’</p>
<p>import Dashboard from ‘./components/pages/DashboardComponent.vue’<br />
import Students from ‘./components/pages/StudentsComponent.vue’<br />
import DisplayStudents from ‘./components/pages/DisplayStudentsComponent.vue’<br />
import DetailStudents from ‘./components/pages/DetailsStudentsComponent.vue’

import Vue from ‘vue’

import Router from ‘vue-router’

import Dashboard from ‘./components/pages/DashboardComponent.vue’

import Students from ‘./components/pages/StudentsComponent.vue’

import DisplayStudents from ‘./components/pages/DisplayStudentsComponent.vue’

import DetailStudents from ‘./components/pages/DetailsStudentsComponent.vue’

Berikutnya kita akan extract alias dari vue router tersebut kedalam vue.js dengan command seperti dibawah ini :

Vue.use(Router)<br />
export default new Router({<br />
    mode: ‘history’,<br />
    routes: &#091;{<br />
            path: ‘/’,<br />
            component: Dashboard,<br />
            name: ‘dashboard’<br />
        },<br />
        {<br />
            path: ‘/students’,<br />
            component: Students,<br />
            children: &#091;{<br />
                    path: ”,<br />
                    component: DisplayStudents,<br />
                    name: ‘displaystudents’<br />
                },<br />
                {<br />
                    path: ‘detail/:id’,<br />
                    component: DetailStudents,<br />
                    name: ‘detailstudents’<br />
                }<br />
            ]<br />
        }<br />
    ]<br />
})

Vue.use(Router)

export default new Router({

mode: ‘history’,

routes: [{

path: ‘/’,

component: Dashboard,

{

path: ‘/students’,

component: Students,

children: [{

path: ”,

component: DisplayStudents,

{

path: ‘detail/:id’,

component: DetailStudents,

}

]

}

]

})

Keterangan:

Export default new Route({â€¦}) adalah sebuah nama inisial dari package
vue-router, berikutnya bagi
routing-routing tersebut nantinya akan di simpan kedalam variable routes yang berfungsi bagi mewalikan
segala routing yang terdapat di dalamnya, seperti itu pun dengan property children yang berfungsi bagi menandakan
url atau path yang di dalamnya.

Berikutnya kita akan import router yang telah kita bikin, dan kita pun akan mendefinisikan property dengan nama router di file app.js bagi scriptnya seperti dibawah ini :

//  import file / component<br />
import Routes from ‘./router.js’;<br />
import App from ‘./components/App.vue’;</p>
<p>// mendefenisikan property<br />
const app = new Vue({<br />
    el: ‘#tema’, // el adalah sebuah element bagi menghubungkan antara vue degan tema blade laravel<br />
    router: Routes, // Routes adalah sebuah nama inisial<br />
    render: h =&gt; h(App), //render file yang terdapat di views tema blade laravel, selaku master tema<br />
});

// import file / component

import Routes from ‘./router.js’;

import App from ‘./components/App.vue’;

// mendefenisikan property

const app = new Vue({

el: ‘#tema’, // el adalah sebuah element bagi menghubungkan antara vue degan tema blade laravel

router: Routes, // Routes adalah sebuah nama inisial

render: h => h(App), //render file yang terdapat di views tema blade laravel, selaku master tema

});

Berikutnya kita akan membangun sebuah file di views dengan nama nestedRouter.blade.php bagi scriptnya seperti dibawah ini :

Cara Membuat Nested Router Menggunakan Laravel dan Vue.js

Di script diatas terdapat id tema yang berfungsi bagi menghubungkan tema blade laravel
dengan component yang terdapat di vue.js.

Oke teman-teman demikianlah pembahasan kita mengenai Cara Mengerjakan Konfigurasi Nested Router
Menggunakan Laravel dan Vue.js kita akan lanjutkan di panduan berikutnya
cara menampilkan data dengan menggunakan Nested
Router.

Terima kasih.

sumber :kursuswebprogramming.com/blog/

(Visited 7 times, 1 visits today)

Leave a Reply Cancel reply