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;
}
最后效果：
浙公网安备 33010602011771号