Vue-routerネストルーティング
第1レベルのビュー
Laravelアプリケーションのホームページファイル：resources / views / app.blade.php
<!DOCTYPE html>
<html lang="{
{ app()->getLocale() }}">
<head>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
二次ビュー
resources / js / pages / Layout.vue、すべてのVue.jsテンプレートはこのテンプレートを継承します
<!-- App.vue -->
<v-app>
<v-navigation-drawer app>
<!-- -->
</v-navigation-drawer>
<v-app-bar app>
<!-- -->
</v-app-bar>
<!-- Sizes your content based upon application components -->
<v-main>
<!-- Provides the application the proper gutter -->
<v-container fluid>
<!-- If using vue-router -->
<router-view></router-view>
</v-container>
</v-main>
<v-footer app>
<!-- -->
</v-footer>
</v-app>
ルーティングファイル
export default new VueRouter({
routes: [
//一级路由
{
path: '/',
redirect: {
name: 'Desktop'},
name: 'Hypercell',
components: Vue.component( 'Layout', require( './pages/Layout' ) ),
children: [
//二级路由
{
path: 'register',
name: 'Register',
components: Vue.component( 'Register', require( './pages/Register' ) ),
},
{
path: 'desktop',
name: 'Desktop',
components: Vue.component( 'Desktop', require( './pages/Desktop' ) ),
},
]
},
]
});
ネストされたルーティングについては、公式ドキュメントを参照してください。
Vueでは、ネストされたルーティングを使用しない場合、第1レベルのビューには1つしかありませんが、それを使用する場合は、第2レベルのビューにももう1つあり、これもネストを構成します。
このように、登録されたルートにアクセスすると、登録テンプレートの内容がレイアウトテンプレートのラベル内にレンダリングされます。
新しいデスクトップビューを追加し、第1レベルのルートにリダイレクトパラメータredirect：{name： 'Desktop'}を追加しました。これにより、Layout.vue（第2レベルのビュー）が個別に表示されず、その後自動的にデスクトップビューにジャンプします。初めてアプリケーションに入る。
Vuexデータストレージ
/*
|-------------------------------------------------------------------------------
| VUEX modules/users.js
|-------------------------------------------------------------------------------
| The Vuex data store for the users
*/
//从 api 目录下导入用户相关 API
import HypercellApi from '../api/users';
//导出一个常量作为用户模块
export const users = {
/**
* Defines the state being monitored for the module.
*/
state: {
verificationCodesSendStatus: 0,
verificationKey:'',
verificationCodesSendErrors:'',
},
/**
* Defines the actions used to retrieve the data.
*/
actions: {
sendVerificationCodes( {
commit },data ){
commit( 'setSendVerificationCodes', 1 );
HypercellApi.sendVerificationCodes(data)
.then( function( response ){
commit( 'setSendVerificationCodes', 2 );
commit( 'setVerificationKey' ,response.data.key);
})
.catch( function(error){
commit( 'setSendVerificationCodes', 3 );
if(typeof error.response.data.errors === "undefined"){
commit( 'setVerificationCodesSendErrors',error.response.data.message);
}else{
commit( 'setVerificationCodesSendErrors', error.response.data.errors[Object.keys(error.response.data.errors)[0]].toString() );
}
});
},
},
/**
* Defines the mutations used
*/
mutations: {
setSendVerificationCodes( state, status ){
state.verificationCodesSendStatus = status;
},
setVerificationKey( state, data){
state.verificationKey = data;
},
setVerificationCodesSendErrors( state, error){
state.verificationCodesSendErrors = error;
},
},
/**
* Defines the getters used by the module
*/
getters: {
getVerificationCodesSendStatus( state ){
return function(){
return state.verificationCodesSendStatus;
}
},
getVerificationKey( state ){
return state.verificationKey;
},
getVerificationCodesSendErrors( state){
return state.verificationCodesSendErrors;
},
}
};
コードの説明
stateオブジェクトの状態は、追跡するすべてのデータの状態です。usersモジュールで携帯電話の確認コードを送信するプロセスでは、追跡する必要のある3つのデータが必要です。SMS確認コードの送信ステータスverifyCodesSendStatus、およびverificationKeyを格納するオブジェクト、エラー情報を格納するObjectverificationCodesSendErrors。
アクションは、状態を変更するために呼び出されるモジュールで使用されます。確認コードを送信する過程で、アクションを呼び出してAPIリクエストを開始し、ミューテーションを送信します。SMS検証コードを送信するためにsendVerificationCodesメソッドをactionsオブジェクトに追加しました。コミット関数はミューテーションを送信するために使用され、状態の各データフラグメントには対応するミューテーションが必要です。上記の方法では、検証コードの送信ステータスを送信します。次に、APIを呼び出して、ロードする指定の情報ステータスをロードします。これらのAPI呼び出しは、resources / assets / js / api /users.jsで定義されています。ファイル、次にthenメソッドとcatchメソッドがチェーンで呼び出されます。前者はAPIリクエストが成功した後に呼び出され、後者はAPIリクエストが失敗した後に呼び出されます。応答変数はこれら2つのメソッドに渡され、応答を取得します。データとリクエストのヘッダー。
ミューテーションは、データの更新方法を定義します。各モジュールには状態があり、各状態を更新するには、対応するミューテーションが必要です。すべてのミューテーションは、状態を設定することです。
各getterメソッドは、部分的なモジュール状態をパラメーターとして渡し、対応する状態データを返します。これは、getterによって実行されるすべての作業です。テンプレート内のデータは、Vuexモジュールのgetterプロパティから取得されます。
EventBusイベントバス
EventBusはイベントバスとも呼ばれます。Vueでは、すべてのコンポーネントが同じイベントセンターを共有するのと同じように、EventBusを通信ブリッジの概念として使用できます。登録してイベントを送信または受信してセンターに送信できるため、コンポーネントは他のコンポーネントに並行して通知できます。たとえば、これを使用して情報を求めることができます。
情報プロンプトコンポーネント
<template>
<div class="text-center">
<v-snackbar
v-model="snackbar"
:timeout="timeout"
>
{
{
text }}
<v-btn
color="blue"
text
@click="snackbar = false"
>
Close
</v-btn>
</v-snackbar>
</div>
</template>
<script>
import {
EventBus} from '../event-bus.js';
export default {
data: () => ({
snackbar: false,
text: '',
timeout: 4000,
}),
mounted() {
//接收 open-message
EventBus.$on('open-message', function (data) {
this.text = data.text.toString();
this.snackbar = true;
}.bind(this));
}
}
</script>
他のコンポーネントを渡すことができます
EventBus.$emit('open-message', {
text: this.$store.getters.getRegisterErrors
});
このイベントをトリガーして、プロンプトとエラーメッセージを表示する効果を実現します。ここで、テキストはエラーメッセージを渡すためのパラメーターです。