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!



Fragen / Kommentare


Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren. Außerdem geben wir Informationen zu Ihrer Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Details anzeigen.