Vueでrouterのヒストリーモードを使ってサブディレクトリで運用する

Vueのrouternのヒストリーモードとは通常のハッシュモードとは違い、#なしの普通のURLで1ページアプリを実現する方法。これをサイトのルートで運用するときはマニュアルに書いてある通りなのでハマることはないのだが、サブディレクトリでやろうとすると大変だったので覚書。

ここではサブディレクトリを/homepageとする。

vue.config.js

vue.config.jsを以下のように書く。

router.js

src/router.jsを以下のように書く。

.htaccess

public/.htaccessを以下のように書く

vueでグローバルな関数をつかう

Vueはコンポーネントでページを構成するフレームワークなのでグローバルな関数や変数というのは基本的には使わないと思われる。データのやり取りはpropsやeventで行うが、グローバル関数が欲しい場合もある。

Vueにはmixinという仕組みもあるみたいだが、これはVueコンポーネントにフックするために使うようで、プラグインなどにも影響するようなので、もっと普通のグローバルな関数を定義したい。

public/index.htmlにjavascriptを置いてもいいがここではvueらしくimportを使って行う。

まずはsrc/global.jsを新規に作成して、ここにグローバルな関数や変数を書く。

ここではdtraceをexportしている。

つぎにコンポーネントでこれをインポートして使う。

Vueのpropsとdata

dataとprops

dataはコンポーネントのプライベートなデータ。propsは他のコンポーネント(親)から設定されるデータ。子コンポーネントではpropsを変更できない。

Vueのコンポーネントはツリー状に構築される。親コンポーネントのdataは子コンポーネントに渡され、子ではそれをpropsとして参照する。

以下のコードは親コンポーネントのコード:

このコードでは子コンポーネントmychildのpropsであるmsgに”Hello World!”を渡している。mychildではmsgを変更できない。
(注)実際変更はできるがやらないほうがいい。

よってmychildコンポーネントでは自分のデータはdata()で管理する。data()はそのコンポーネントのみのデータなので他のコンポーネントによって変更されることはない。
(注)実際にはできるがやらないほうがいい。

親から子にデータを渡すときはpropsを使うが、逆に子から親へデータを渡すときはイベントを使う。イベントに関しては今回はスルー。

watcherとcomputed

watcher

Vueのコンポーネントではpropsの変更に対応する必要がある。watcherはプロパティを監視し、それが変更されたとき関数を実行する。

以下の例ではmsgやnameが変更されたとき、ログを表示する。

watcherはすべてのリアクティブプロパティで利用できる。これにはcomputed、props、data()内のデータも含まれる。date()は自分で設定するので通常は必要ない。

computed

Computedはあるデータから新しいデータを構築する。

以下の例では、nameが変更されると、nameLenが再構築される。nameLenはテンプレート内で{{ nameLen }}のように利用できる。

まとめ

data()はそのコンポーネントでのみ使うプライベートなデータ。
propsは親コンポーネントによって設定されるデータ。
watcherはデータが変更されるとき呼ばれる関数。
computedはデータが変更されたとき、それに依存するデータを設定するための関数。

.vueソース

ボタンがクリックされるとnameが変更され、nameLenが変更される。