Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

トップ > Vue.js > 【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】

【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】

Vue.js

【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】

f:id:duo-taro100:20160218004611p:plain

今回はVueRouterを使わないで、画面を切り替える方法として、component要素を使ってます。

公式サイト

012-jp.vuejs.org

動き

うまく見えなければページをリロードしてください。

See the Pen vue-components by duotaro (@duotaro100) on CodePen.


実装内容

■index.html
vueはcdnを利用してます。

<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>動的Componentの使い方</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<component :is="currentPage"></component>
		<button @click="transPage('home')">Home</button>
		<button @click="transPage('money')">Money</button>
		<button @click="transPage('setting')">Setting</button>
	</div>
</body>
</html>

以下の箇所で、画面切り替えを制御している。

<component :is="currentPage"></component>

currentPageが一致したコンポーネントを表示しています。
注意点は

デフォルトのcurrentPageを設定
currentPageの値を変更することで切り替えできる
画面全体の切り替えだけでなく、画面の一部だけを切り替えることもできる

■script

Vue.component('money', {
	template:
		'<div>'+
			'<p>welcome money page</p>'+
		'</div>'
})

Vue.component('home', {
	template:
		'<div>'+
			'<p>welcome home page</p>'+
		'</div>'
})

Vue.component('setting', {
	template:
		'<div>'+
			'<p>welcome setting page</p>'+
		'</div>'
})


var app = new Vue({
  el: '#app',
  data: {
		currentPage : 'home',
  },
  methods : {
  	/**
  	 * currentPageを変更します。
  	 * @param {string} page : 変更先のコンポーネント名
  	 */
  	transPage : function(page){
  		this.currentPage = page;
  	}
  }
})

デフォルトのcurrentPageを「home」に設定していて、transPageでcurrentPageの切り替えを行っています。
コンポーネントは切り替えがうまくいっていることが確認できればいいので適当です。