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; }
最后效果: