Vue-Router

[yuyuyuriko78]

Vue Router

• Vue.jsを利用したSPA構築で、ルーティングを制御するための公式プラグイン

[yuyuyuriko78]

環境構築

• npmのインストール npm install
• npmでVueRouterをインストール npm install vue-router

[yuyuyuriko78]

ディレクトリ・ファイル構成

src

• ★components
  • HelloWorld.vue
  • 従来のコンポーネント。routerとは無関係
• ★router
  • index.js
  • routerの設定
• ★views
  • sample1.vue
  • routerによって表示される画面

    main.js

• アプリの全体設定

[yuyuyuriko78]

準備

router > index.js または src > router.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    //ルーティングの設定
  ]
});

main.js

• import routers from './router'
• new Vue ({...})の中に router: routers,を追加

  
  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'

Vue.config.productionTip = false

new Vue({ router, render: h => h(App), }).$mount('#app')

[yuyuyuriko78]

使い方

①表示させるVueコンポーネント作成 / views > 各種vueファイル

• ここで作るVueファイルもVueコンポーネントではあるのだが、componentsフォルダではなくviewsフォルダに入れる views > Sample.vue

  <template>
  <div class="Sample">
  <h1>サンプル−ページ</h1>
  <p>このコンポーネントが表示されます</p>
  </div>
  </template>

---

②表示する場所の設定 / App.vue

• <router-view></router-view> に表示される

  
  <template>
  <div id="app">
  <p>↓ここに表示されます</p>
  <router-view></router-view>
  </div>
  </template>

***
## ③routerの設定 / router > index.js  または  src > router.js
- `mode`
  - `history`モード: 設定が必要で通信が発生し遅いが、URLに`#`が入らない。*基本こっち*
  - `hash`モード: 設定が簡単で動きも速いが、URLに`#`が入る。
- VueRouterインスタンスの中の`routes`に、連想配列の形で設定を定義する

パラメタ名 | 機能
--- | ---
path | このURLにアクセスしたら
component | このコンポーネントに飛ぶ
name | ルーティングの名前　※省略可

```js
import Vue from 'vue';
import VueRouter from 'vue-router';

import Top from '@/views/Top';
import Sample from '@/views/Sample';
import NotFound from '@/views/NotFound';

Vue.use(VueRouter);

const routers = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: '',
      component: Top,
    },
    {
      path: '/sample1',
      name: 'sample',
      component: Sample,
    },
    {
        path: '*',
        name: 'notFound',
        component: NotFound,
    },
  ],
});

export default routers;

---

④ここを押す表示させるよ！というボタンなど設定

バージョン１：HTMLに埋め込む

<template>
  <div id="test">
    <nav>
      <router-link to="/">トップ</router-link>
      <router-link to="/sample1">サンプル１</router-link>
    </nav>
  </div>
</template>

バージョン２：メソッドで飛ぶ　this.$router.push('/new');

<template>
  <div id="page-top">
    <Button v-on:click="gotoNew">新しい本を追加</Button>
  </div>
</template>

<script>
export default {
  name: 'Top',
  methods: {
    gotoEdit(bookId) {
      this.$router.push(`/edit/${bookId}`);
    },
    gotoNew() {
      this.$router.push('/new');

[yuyuyuriko78]