header ads

v-navigation-drawer内のrouter-linkをクリックした後、drawerが閉じてから遷移させたい

10月 27, 2023

Vue3にてVuetifyのコードを書いています。

CLIを使わずCDNから呼び込んで書いているのでわかりにくいかと思いますが、、、

index.html

1～～～～～～ 2 <body> 3 <div id="app"> 4 <v-app > 5 <router-view /> 6 </v-app> 7 </div> 8 <script src="https://unpkg.com/vue@next"></script> 9 <script src="https://unpkg.com/vue-router@next"></script> 10 <script src="https://unpkg.com/vuetify@3"></script> 11 <script type="text/javascript" src="/static/js/vue/main.js"></script> 12 </body> 13～～～～～～

'index.js'と'other.js'のコンポーネントを作りrouterを設定しています。

main.js

1const routes = [ 2 { 3 path: '/', 4 name: 'Index', 5 component: () => import('/static/js/vue/index.js') 6 }, 7 8 { 9 path: '/other, 10 name: 'Other', 11 component: () => import('/static/js/vue/Other.js') 12 }, 13] 14 15～～～～～～createRouter(), createVuetify(),Vue.createApp()など 16 17app.use( vuetify ); 18app.use( router ); 19app.mount( "#app" ); 20

NavBarという共通使用目的のドロワーコンポーネントを作り、

nav_bar.js

1export default { 2 name: 'NavBar', 3 data() { 4 return { 5 drawer: false, 6 pages : [ { name : 'Index', url: '/' }, { name : 'Other', url : '/other' },] 7 }; 8 }, 9 template: ` 10 <header> 11 <v-app-bar app> 12 <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon> 13 <v-toolbar-title>test</v-toolbar-title> 14 </v-app-bar> 15 <v-navigation-drawer v-model="drawer" fixed temporary> 16 <v-list nav dense> 17 <v-list-item v-for="component in components"> 18 <router-link :to=page.url>{{component.name}}</router-link> 19 </v-list-item> 20 </v-list> 21 </v-navigation-drawer> 22 </header> 23 ` 24};

routerで設定した'index.js'と'other.js'のコンポーネント内でNavBarを配置しています。

'other.js'も以下同様になっています。

index.js

1import NavBar from '/static/js/vue/nav_bar.js'; 2 3export default { 4 name: 'Index', 5 data() { 6 return { name : "Index", }; 7 }, 8 template: ` 9 <NavBar></NavBar> 10 <h1>Index</h1> 11 `, 12 components: { 13 'NavBar' : NavBar 14 } 15};

結果、errorもwarnも出ません。
きちんと動きます。

しかし、ドロワーのリンクをクリックするとドロワーが開いたまま遷移します。
これを

  1. ドロワーのリンクをクリック

  2. ドロワーのリンクが閉じる始める

  3. ドロワーのリンクが閉じ終わる

  4. 画面が遷移する。

というようにしたいです。

恐らく、
https://v2.vuetifyjs.com/ja/api/v-navigation-drawer/#events
のtransitionendを使うと思うのですが、使用例を検索しても出てきません。

教えていただけますでしょうか?

hsmw

hsmw

コメントを投稿

0 コメント