Vue.js vue-router設定

vue-routerを設定する

$ vue create router

Manually select featuresを選択

Vue CLI v4.4.4
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

スペースキーでRouterを選択

Vue CLI v4.4.4
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Yを選択

Vue CLI v4.4.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 

ルーティングの設定

Vue/router/src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/privacy">プライバシー</router-link>
    </div>
    <router-view/>
  </div>
</template>

Vue/router/src/router/index.js

import Privacy from '../views/Privacy.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/privacy',
    name: 'privacy',
    component: Privacy
  },
]

Vue/router/src/views/Privacy.vueへファイルを新規作成する

get値を取得する

Vue/router/src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/user/1">ユーザー</router-link>  
      <router-link :to="{name: 'user', params: {id: 3}, query: {q: 'hoge'}}">ユーザー</router-link>  //get値でルーティングする
    </div>
    <router-view/>
  </div>
</template>

Vue/router/src/router/index.js

import User from '../views/User.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  },
]

Vue/router/src/views/User.vue

<template>
  <div class="user">
    <h1>{{ this.$route.params.id }}</h1>
    <div>{{ this.$route.query.q }}</div>  //http://localhost:8080/user/1?q=hoge
  </div>
</template>

ルートをネストする

/user:idにアクセスした場合、first secondのコンポーネントを表示させる

Vue/router/src/router/index.js

import FirstChild from '../views/user/FirstChild.vue'
import SecondChild from '../views/user/SecondChild.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    children: [
      {
        path: 'first',  // スラッシュは記載しない
        name: 'first',
        component: FirstChild
      },
      {
        path: 'second',
        name: 'second',
        component: SecondChild
      },
    ]
  },
]

<template>
  <div class="user">
     <div>
         <router-link :to="{name: 'first'}">ファースト</router-link>
         <router-link :to="{name: 'second'}">セカンド</router-link>
     </div>
    <router-view/>  //frist,secondのコンポーネントを表示させる
  </div>
</template>

ワイルドカードのルートをリダイレクトする

設定以外のルートの場合、'/'へリダイレクトする
ワイルドカードはルーティングの最後に記載する

Vue/router/src/router/index.js

Vue.use(VueRouter)

  const routes = [
  {
    path: '*',
    redirect: '/',
  },
]

遅延ローディングについて

component: Homeへアクセス時
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')と
記載することでHome.vue表示した時にAbout.vueは読み込まず
リンク押下時に読み込むことで表示を軽くする

Vue/router/src/router/index.js

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
]