vueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。
vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネント内で動的にページを切り替えたりページ遷移するまえに独自のチェックなどを行いたい場合があります。
以下のようにthis.$routerでvue-routerを参照できます。pushで指定したパスにページ遷移ができます。
<template>
<div>
<a href="/about" @click.stop.prevent="goAbout">ABOUT</a>
</div>
</template>
<script>
export default {
methods: {
goAbout () {
this.$router.push({ path: 'about' });
}
}
};
</script>vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...
vue-routerでシングルページアプリケーションを作成する際に、例えばヘッダやサイドバーのナビゲーションで現在表示しているページのリンクを無効にしたり色を変えたりしたい場合があります。現在表示して...
Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション（spa）を作成します。開発環境やフォルダ構成はwebpack モジュールのパスを絶対パスで指定する方法で扱った...
vue-routerで各ページに遷移したタイミングで初期化などのメソッドをコールしたい場合があります。以下のようにbeforeRouteEnterで各ページ起動時に処理を行うことができます。befor...
Vue Rtouterでページの表示時と離脱時のイベントをコンポーネントで設定する方法を紹介します。ページ表示時のイベントはbeforeRouteEnterを使用します。beforeRouteEnte...
vue-routerでページ遷移するときにスクロールの位置をトップ（一番上）に移動させたいとき、公式サンプルにしたがって以下のように実装します。JavaScript ページの先頭までアニメーションスク...
Electronとvue-routerを使うときに、ページ制御がうまく行かないときはrouterの設定を確認します。modeがhistoryになっているとなぜかうまく行かなかったのでhashに変更しま...
Vue.js lessを使いwebpackでビルドするでvueファイルの中でlessを実装してビルドする方法を紹介しました。htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装...
webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...
webpack-dev-serverで開発サーバーを起動します。ファイルやフォルダ構成などの環境はvueファイル（単一ファイルコンポーネント）をwebpackでビルドで紹介したものと同様とします。we...