この記事は2021年01月25日に投稿しました。
1. はじめに
こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているVue Routerで画面の1部分を切り替える方法についてです。
2. Vue Routerで画面を切り替える
Vue Routerで画面の1部分を切り替える方法ですが、以下の手順になります。
Vue CLIプロジェクトが対象になります。
1.画面コンポーネントを作成します。
※今回は親画面と切り替える画面を2画面分作成します。
Parent.vue(親画面)
<template> <v-app> <v-main> <v-container class="gridLayout"> <div class="parent">親画面</div> <router-link to="/" class="child">子画面1表示</router-link> <router-link to="/child2" class="child">子画面2表示</router-link> </v-container> <!-- "子画面1表示"リンクまたは"子画面2表示リンク"クリックにより"router-view"の表示内容が切り替わります。 --> <router-view/> </v-main> </v-app> </template> <script> export default { name: 'Parent', }; </script> <style scoped> .gridLayout { width: 600px; display: grid; grid-template-columns: repeat(2, 1fr); } .parent { grid-column: 1 / span 2; text-align: center; } .child { text-align: center; } </style>
Child1.vue(子画面)
<template> <v-container class="gridLayout"> <div class="child">子画面1内容</div> </v-container> </template> <script> export default { name: 'Child1', }; </script> <style scoped> .gridLayout { width: 600px; display: grid; grid-template-columns: 1fr; } .child { text-align: center; } </style>
View2.vue(子画面)
※表示内容以外"Child1.vue"とほぼ同じです。
<template> <v-container class="gridLayout"> <div class="child">子画面2内容</div> </v-container> </template> <script> export default { name: 'Child2', }; </script> <style scoped> .gridLayout { width: 600px; display: grid; grid-template-columns: 1fr; } .child { text-align: center; } </style>
2.src/route.jsを以下の内容で作成します。
import Vue from 'vue'; import VueRouter from 'vue-router'; import Parent from './views/Parent'; import Child1 from './views/Child1'; import Child2 from './views/Child2'; Vue.use(VueRouter); const routes = [ { path: '/', component: Parent, children: [ // "/"がリクエストされた場合、"Child1"が表示されます。 { path: '/', components: { default: Child1, }, }, // "/child2"がリクエストされた場合、"Child2"が表示されます。 { path: '/child2', components: { default: Child2, }, }, ], }, ]; const router = new VueRouter({ mode: 'history', routes: routes, }); export default router;
3.src/App.vueを以下の内容で修正します。
<template> <router-view/> </template> <script> export default { name: 'App', }; </script>
参考
3. おわりに
SPA(Single Page Application)として画面の一部分を切り替えて表示するため、Vue.jsを採用しました。
簡単にできるかと思ったのですが、やり方がわからず実現するのに時間がかかりました。
紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。
私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッドOS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOSモバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。
また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。
EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688