トップ > Vue Routerって何。

Vue Routerって何。

最近Vue、コンポーネント、リアクティブ性、拡張性の高さ、トランジションが特徴、の学習を始めました。Vue Router公式を参考にして特徴と使い方についてまとめていきたいと思います

Railsのルーティングとは違うのか？7と感じたので、学習していきます。

 

Vue Routerって何

vueが公式に提供しているライブラリの一つ。ルーティング機能を提供してくれる。

Vue routerを使うことで、SPA(Single Page Application)を作ることができるので、ユーザーの離脱率を抑えることができる。

https://router.vuejs.org/

  • ネストされたルート/ビューマッピング
  • モジュール式、コンポーネントベースのルータ構造
  • ルートパラメータ、クエリ、ワイルドカード
  • Vue.js の transition 機能による、transition エフェクトの表示
  • 細かいナビゲーションコントロール
  • 自動で付与される active CSS クラス
  • HTML5 history モードまたは hash モードと IE9 の互換性
  • カスタマイズ可能なスクロール動作

railsでいうroutes.rbと同じ役割をしてくれる認識

SPAって何？

Single Page Applicationの略。

シングルページアプリケーションとは、Webアプリケーションの構成法の一つで、Webブラウザ側でページの移動を行わず、最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式。

メリット

  1. 通常のWeb ページでは実現できないユーザー体験を実現できる。
  2. 高速なページ遷移を実現できる。

下記記事にもあるとおり、ページのローディング速度が遅い程離脱率が上がるとのこと。

https://neilpatel.com/blog/loading-time/?wide=1

デメリット

  1. SEO対策のためにサーバーサイドレンダリング(SSR)という技術で対策をしなければならない
  2. 開発者が少ない。

Vueをどうやって使う？

  1. yarnまたはnpmパッケージを用いてインストールするか、CDNをheadタグに直接書き込む方法がある。
$ yarn add vue-router
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > bootstrap@4.0.0-beta" has unmet peer dependency "jquery@>=3.0.0".
warning " > bootstrap@4.0.0-beta" has unmet peer dependency "popper.js@^1.11.0".
warning " > vue-loader@15.9.8" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.8" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-router@3.5.2
info All dependencies
└─ vue-router@3.5.2
✨  Done in 6.51s.
  1. app/javascript配下にrouter/index.jsを作成する
import Vue from "vue";
import Router from "vue-router";

import TopIndex from "../pages/top/index";
import TaskIndex from "../pages/task/index";

Vue.use(Router)

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: TopIndex,
      name: "TopIndex",

    },
    {
      path: "/tasks",
      component: TaskIndex,
      name: "TaskIndex",
    },
  ],
})

export default router

import Vue from "vue"

Vueを使えるようにしている。

import Router from "vue-router"

vue-routerを使えるようにしている。

Vue.use(Router)

VueでimportしてきたRouterを使うためのインスタンスが生成される

const router = new Router({

mode: "history", routes: [

ルーティングを定義している。

ホームディレクトリでTopIndexに遷移し、/tasksでTaskIndexに飛ぶようにしている。

vue-router のデフォルトは hash モード です - 完全な URL を hash を使ってシミュレートし、 URL が変更された時にページのリロードが起きません。

デフォルトの挙動ではURLに#が含まれるが、mode:historyを指定することでURLからhashを取り除くことができる。

3. エントリポイントとなるJavaScriptファイルに記述を追加する

app/javascript/packs配下にhello_vue.jsを作成し、このファイルをエントリポイントとする。ちなみにエントリポイントとは、アプリケーションの最初に読み込まれて、実行される部分を指す。

import router from '../router'
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    **router,**
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

このようにプラグインでrouterを宣言することで、this.$routerで他のファイルでもVue Routerを呼び出せるようにしている。

4. Viewを実装する

ルーティング制御によって表示したいコンテンツの場所に、<router-view>タグを記述する。

app/javascript/app.vue

<template>
  <div>
    <router-view />
  </div>
</template>

railsの<%= yield%>に似ている。javascript/pages/hoge/hoge.vueの内容がapp.vueの<template>に描画されるイメージ

5. router-linkコンポーネントを利用して遷移を実装する

<router-link :to="{ name: 'TopIndex' }" class="btn btn-dark mt-5">戻る</router-link>

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: TopIndex,
      name: "TopIndex",

    },
    {
      path: "/tasks",
      component: TaskIndex,
      name: "TaskIndex",
    },
  ],
})

遷移先をto属性の値として指定する。<router-link>タグは<a>タグとしてレンダリングされる。

Vueインスタンスって何

Viewで使われるインスタンスのこと。下記ライフサイクルフックにおいて、一番最初に行われる作業。

Untitled

vm (ViewModel の略) を Vue インスタンスの変数名としてよく使うようです。

https://jp.vuejs.org/v2/guide/instance.html

詳しい説明は以下の通り

各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、特定の段階でユーザー自身のコードを追加する**ライフサイクルフック(lifecycle hooks)**と呼ばれる関数を実行します。

（公式ページhttps://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム)

Vueにはtemplate,mounted,watcherなどのフックスがあるみたいです。

いろんな記事のつぎはぎみたいになってしまった。実際にアプリ開発を進めていく段階で脳内の継ぎ目を綺麗にしていきたい。

Vue インスタンス - Vue.js

Vue インスタンスにつて勉強する - Qiita

VueRouterを使用してSPAを実現