Laravel - Vue Router
Vue Router ermöglicht es in SPA (Single Page Applications) mittels URL-Pfade direkt bestimmte Vue-Componenten zu laden.
Als Beispiel habe ich einen Teil der Seite, den Admin-Bereich: /admin mittels Vue-Router und entprechende Vue-Components umgesetzt.
eigenes app.js File und Webpack
File /resources/js/adminapp.js
require('./bootstrap');
window.Vue = require('vue');
const files = require.context('./components', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import Welcome from './views/Welcome'
import Hashtags from './views/Hashtags'
import Users from './views/Users'
import Uploads from './views/Uploads'
const router = new VueRouter({
base: 'admin',
routes: [
{
path: '/',
component: Welcome
},
{
path: '/hashtags',
component: Hashtags
},
{
path: '/users',
component: Users
},
{
path: '/uploads',
component: Uploads
},
],
})
const adminapp = new Vue({
el: '#app',
components: { App },
router,
});Damit das Javascript-File zusätzlich zu app.js compiliert wird, habe ich Webpack entsprechend angepasst:
File webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/adminapp.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').version();
Routing / Controller / View
in /routes/web.php
...
Route::get('admin', 'AdminController@index');
...der Controller:
...
class AdminController extends Controller
{
public function index()
{
return View('admin');
}
in /views/admin.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ mix('js/adminapp.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
</html>
Vue-Router Views
Dann als Startpunkt für Vue-Router:
/resources/js/views/App.vue
<template>
<div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="/">
Home
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="toggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<router-link :to="{ path: '/' }" class="nav-link">Admin</router-link>
<router-link :to="{ path: '/hashtags' }" class="nav-link" >Hashtags</router-link>
<router-link :to="{ path: '/users' }" class="nav-link" >Users</router-link>
<router-link :to="{ path: '/uploads' }" class="nav-link" >Uploads</router-link>
</ul>
</div>
</div>
</nav>
<main class="p-xl-5 p-lg-4 p-md-3">
<router-view></router-view>
</main>
</div>
</template>
<script>
export default {}
</script>und die einzelnen Components für die einzelnen Seiten:
/resources/js/views/Welcome.vue
<template>
<div class="flex-center position-ref full-height">
Welcome
</div>
</template>
<script>
export default {
}
</script>/resources/js/views/Hashtags.vue
<template>
<div class="flex-center position-ref full-height">
HashTags
</div>
</template>
<script>
export default {
}
</script>/resources/js/views/Uploads.vue
<template>
<div class="flex-center position-ref full-height">
Uploads
</div>
</template>
<script>
export default {
}
</script>
({{pro_count}})
{{percentage}} % positiv
({{con_count}})
DANKE für deine Bewertung!
Laravel Beispiel Tutorial - Schritt für Schritt
Wie in dem zuvor veröffentlichten Artikel "Übersicht Laravel Funktion" bereits angekündigt, habe ich für Laravel ein Praxis-Beispiel erstellt. Das Beispiel kann bestimmte Datenbankeinträge erstellen, anzeigen, bearbeiten und löschen. In einem nächsten Beispiel werde ich zu dem hier beschriebenen Beispiel eine Benutzeranmeldung und Berechtigung hinzufügen (Authentification, Authorization), vorerst starten wir ohne dieser .... ... weiterlesen
Laravel Vue
.vue Files setzen ein Webpack-Setup voraus ... ... weiterlesen
Laravel Authentication und Authorization Beispiel
Laravel ist für Benutzer-Anmeldungen bereits vorbereitet, das Aktivieren der Funktion erfolgt mit einem einfachen Befehl. ... weiterlesen