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>
positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE für deine Bewertung!


Top-Artikel in diesem Bereich

Preview Laravel Beispiel Tutorial - Schritt für Schritt

Laravel Beispiel Tutorial - Schritt für Schritt

geändert: 27.07.2020 von Bernhard (Erstveröffentlichung: 21.08.2016)

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

Preview Laravel Vue

Laravel Vue

erstellt: 29.10.2019 von Bernhard

.vue Files setzen ein Webpack-Setup voraus ... ... weiterlesen

Preview Laravel Authentication und Authorization Beispiel

Laravel Authentication und Authorization Beispiel

geändert: 06.10.2019 von Bernhard (Erstveröffentlichung: 12.09.2016)

Laravel ist für Benutzer-Anmeldungen bereits vorbereitet, das Aktivieren der Funktion erfolgt mit einem einfachen Befehl. ... weiterlesen


Fragen / Kommentare