Vue命名视图

结构图

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')
    .sass('resources/sass/app.scss', 'public/css')
    .version();

web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::get('/user/{any?}', 'Router\UserController@show')
    ->where('any', '.*')
    ->middleware('auth');

user.balde.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/app.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">
    <h1>Nested Named Views</h1>
    <router-view></router-view>
</div>

</body>
</html>

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';

Vue.use(VueRouter);
/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import router from './components/router/index.js';
//加載就推送到下面這個頁面
router.push({name: 'emails'});

const app = new Vue({
    el: '#app',
    router,
});

index.js

import VueRouter from "vue-router";
import UserSettings from "./UserSettings";
import UserEmailsSubscriptions from "./UserEmailsSubscriptions";
import UserProfile from "./UserProfile";
import UserProfilePreview from "./UserProfilePreview";

const routes = [
    {
        path: '/user/settings',
        // You could also have named views at tho top
        component: UserSettings,
        children: [
            {
                path: 'emails',
                name: 'emails',
                component: UserEmailsSubscriptions
            },
            {
                path: 'profile',
                name: 'profile',
                //此路由對應包含了兩個Vue視圖組件
                components: {
                    default: UserProfile,
                    helper: UserProfilePreview
                }
            }]
    }
];

const router = new VueRouter({
    mode: 'history',
    routes,
});


export default router;

UserSettings.vue:

<template>
    <div class="us">
        <h2>User Settings</h2>
        <UserSettingsNav/>
        <router-view class="us__content"/>
        <router-view name="helper" class="us__content us__content--helper"/>
    </div>
</template>

<script>
    import UserSettingsNav from "./UserSettingsNav";

    export default {
        name: "UserSettings",
        components: {
            UserSettingsNav,
        },
    }
</script>

<style scoped>

</style>

UserSettingsNav.vue:

<template>
    <div class="us__nav">
        <router-link :to="{name:'emails'}">emails</router-link>
        <br>
        <router-link :to="{name:'profile'}">profile</router-link>
    </div>
</template>

<script>
    export default {
        name: "UserSettingsNav"
    }
</script>

<style scoped>

</style>

UserProfilePreview.vue:

<template>
    <div>
        <h3>Preview of your profile</h3>
    </div>
</template>

<script>
    export default {
        name: "UserProfilePreview"
    }
</script>

<style scoped>

</style>

UserProfile.vue:

<template>
    <div>
        <h3>Edit your profile</h3>
    </div>
</template>

<script>
    export default {
        name: "UserProfile",
    }
</script>

<style scoped>

</style>

UserEmailsSubscriptions.vue

<template>
    <div>
        <h3>Email Subscriptions</h3>
    </div>
</template>

<script>
    export default {
        name: "UserEmailsSubscriptions"
    }
</script>

<style scoped>

</style>

app.scss:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

.us {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "header header"
        "nav content"
        "nav helper"
;
}

h2 {
    grid-area: header;
}

.us__nav {
    grid-area: nav;
    border: 1px dotted;
    margin-right: .75rem;
    padding: .3rem;
}
.us__content {
    grid-area: content;
}
.us__content--helper {
    grid-area: helper;
}

最后效果：

猜你喜欢