Vue.jsのvue-routerを使いこなす！実例で解説｜SPAのぺージ遷移を簡単に実装する方法（WebpackやRailsで使う方法）

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle al
l, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

vue add vue-router

yarn add vue-router

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'   //1.インポート

Vue.use(VueRouter)  　//2.Vueのプラグインとして呼び出し
const router = new VueRouter();    //3.インスタンス生成

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    router,     //4. インスタンスを追加
    render: h => h(App)
  }).$mount('#app')

# yarn add vue-router
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
・
・
・
└─ vue-router@3.5.2
Done in 252.66s.

import Vue from 'vue'
import VueRouter from 'vue-router' //追加
import App from '../app.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(VueRouter)　//追加
const router = new VueRouter() 

Vue.use(Vuetify) 
const vuetify = new Vuetify() 

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

|- main.js
|- router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//使用するコンポーネントを追加でimportする

Vue.use(VueRouter)

export default new VueRouter({
  //vue-routerの設定（モードやコンポーネントの設定）
})

import Vue from 'vue'
import router from './router' //追加

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

import エクスポート名 from モジュール

|- javascript
|     |
|     |- packs
|     |    |- main.js
|     |
|     |- app.vue

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

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

//使用するコンポーネントを追加でimportする

Vue.use(VueRouter)

const router = new VueRouter({
  //vue-routerの設定（モードやコンポーネントの設定）
})

export default {
  router
}
</script>

<style scoped>
</style>

import Vue from 'vue'
import App from '../app.vue' //追加

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

|- javascript
|     |
|     |- packs
|     |    |- main.js
|     |
|     |- app.vue
|     |
|     |- components
|          |- Top.vue

<template>
  <div>
      <h1>Topページ</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
h1{
    color: blue;
    font-weight: bold;
}
</style>

<template>
  <div>
    <header>共通ヘッダー</header>
    
    <router-view></router-view>
    
    <footer>共通フッター</footer>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/',
      component: Top  },
  ]
})

export default {
  router
}
</script>

<style scoped>
</style>

<template>
  <div>
    <header>共通ヘッダー</header>
    
    <router-view></router-view>
    
    <footer>共通フッター</footer>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',  //追記
  routes: [
    { path: '/',
      component: Top  },
  ]
})

export default {
  router
}
</script>

<style scoped>
</style>

<template>
  <div>
    <header>共通ヘッダー</header>
    
    <router-view></router-view>
    
    <footer>共通フッター</footer>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history', 　//historyモード
  routes: [
    { path: '/top',  //ルーティング
      component: Top  },
  ]
})

export default {
  router
}
</script>

<style scoped>
</style>

Rails.application.routes.draw do

  ActiveAdmin.routes(self)
  root 'home#index'
  get '/top', to: 'home#index'  #追記
end

<template>
  <div id="error">
      <h1>Page Not Found</h1>
      <a href="/">Return To Top</a>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
#error{
    color: red
}
</style>

<template>
  <div>
    <header>共通ヘッダー</header>
    
    <router-view></router-view>
    
    <footer>共通フッター</footer>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'
import Error from './components/404' //404.vueの読み込み

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/',
      component: Top  },
    { path: '*',
    component: Error  }　　//エラーページへのルーティング
  ]
})

export default {
  router
}
</script>

<style scoped>
</style>

<template>
  <div id="user-post-wrapper">
    <p>名前：{{ $route.params.name }}</p>
    <p>投稿ID：{{ $route.params.post_id }}</p>
    <p>$route.paramsの中身： {{$route.params}}</p>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
#user-post-wrapper{
    color: blue;
    margin: 40px 10px;
    max-width: 600px;
    border: solid 1px gray;
}
</style>

    { path: '/users/:name/posts/:post_id', component: UserPostShow  },

<template>
  <div>
    <header>共通ヘッダー</header>
    
    <router-view></router-view>
    
    <footer>共通フッター</footer>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'
import Error from './components/404'
import UserPostShow from './components/UserPostShow'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/',
      component: Top  },
    { path: '/users/:name/posts/:post_id',
      component: UserPostShow  },
    { path: '*',
    component: Error  }
  ]
})

export default {
  router
}
</script>

<style scoped>
</style>

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
      ]
    }
  ]
})

<template>
  <div id="user-wrapper">
    <p>ユーザーID：{{ $route.params.id }}</p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoprd>
#user-wrapper{
    color: blue;
    margin: 40px 10px;
    max-width: 600px;
    border: solid 1px gray;
}
</style>

<template>
  <div id="user-profile-wrapper">
    <h2>ユーザープロフィール</h2>
    <ul>
        <li>名前：</li>
        <li>年齢：</li>
        <li>性別：</li>
        <li>職業：</li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
#user-profile-wrapper{
    color: orange;
    margin: 20px 10px;
    padding-left: 30px;
    max-width: 400px;
    border: solid 1px gray;
}
</style>

<template>
  <div id="user-posts-wrapper">
    <h2>投稿一覧</h2>
    <ul>
        <li>投稿１：</li>
        <li>投稿２：</li>
        <li>投稿３：</li>
        <li>投稿４：</li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
#user-posts-wrapper{
    color: green;
    margin: 20px 10px;
    padding-left: 30px;
    max-width: 400px;
    border: solid 1px gray;
}
</style>

    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    },

<template>
  <div>
    <header>共通ヘッダー</header>
    
    <router-view></router-view>
    
    <footer>共通フッター</footer>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'
import Error from './components/404'

//テンプレートのimport
import User from './components/User/User'
import UserProfile from './components/User/UserProfile'
import UserPosts from './components/User/UserPosts'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/',
      component: Top  },
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    },
    { path: '*',
    component: Error  }
  ]
})

export default {
  router
}
</script>

<style scoped>
</style>

<router-link to="URI">アンカーテキスト</router-link>

<router-link to="/users/123">User ID 123</router-link>

<router-link :to="userId">User ID 123</router-link>

<script>
export default {
    data(){
        return{
            userId: "user/123",
        }
    }

}
</script>

<router-link :to='"user/"+ id'>リンク</router-link>

<script>
export default {
    data(){
        return{
            id: 123
        }
    }

}
</script>

<router-link :to="`user/${id}`">リンク</router-link>

<script>
export default {
    data(){
        return{
            id: 123
        }
    }

}
</script>

 <router-link :to="{ path: 'user/123'}">リンク</router-link>

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

<router-link :to="{name: 'テンプレート名'}">アンカーテキスト</router-link>

<router-link :to="{name: 'テンプレート名', params: { パラメータ名1: 値1, パラメータ名2: 値2, パラメータ名3: 値3,,, }}">アンカーテキスト</router-link>

<router-link :to="{ name: 'User', params: { id: 123 }}">アンカーテキスト</router-link>

<router-link :to="{name: 'テンプレート名', query: {キー名1:値1, キー名2:値2,,,} }">アンカーテキスト</router-link>

<router-link :to="{ name: 'yama', query: { keyword:'peak', height:3000, place: 'shizuoka' } } ">Mountain</router-link>

router.push('パス')

// 文字列でパスを指定
router.push('パス')

// オブジェクトで指定
router.push({ path: 'パス' })

// 名前付きルート（パラメータあり）
router.push({ name: 'テンプレート名', params: { パラメータ名: 値 } })

// クエリの指定
router.push({ path: 'パス', query: { キー名: 値 } })

const router = new VueRouter({
  routes: [
    { path: '/',
      component: Top  },
    {
      path: '/user/:id',
      component: User,
      name: 'user',
     }
  ]
})

<p @click="linkToUser(123)">User</p>

export default {
    methods:{
        linkToUser(userId){
            this.$router.push( {name: 'user', params: { id: userId }} )
        }
    }
}

      <router-link :to="パス" tag="タグ">アンカーテキスト</router-link>

routes: [
  { 
    path: '元のパス',
    redirect: 'リダイレクト後のパス' 
  }
]

routes: [
  { 
    path: '元のパス',
    redirect: { name: 'リダイレクト後のテンプレート名' }
  }
]

      components: {
        default: テンプレート1,
        テンプレート名2: テンプレート2,
        テンプレート名3: テンプレート3,
　　　　・
　　　　・
　　　　・
      }

<router-view name="テンプレート名"></router-view>

<router-view name="テンプレート名" id="id名" class="class名"></router-view>

|- javascript
|     |
|     |- packs
|     |    |- main.js
|     |
|     |- app.vue
|     |
|     |- components
|          |- Top.vue
|          |
|          |- layouts
|                |- Header.vue
|                |- Footer.vue

<template>
  <div>
      <hr>
      <h2>This is Header</h2>
      <hr>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
div{
    margin: 30px 0;
}
</style>

<template>
  <div>
      <hr>
      <h2>This is Footer</h2>
      <hr>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
div{
    margin: 30px 0;
}
</style>

<template>
  <div>
      <h1>Topページ</h1>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
h1{
    color: blue;
    font-weight: bold;
}
</style>

<template>
  <div>
    <router-view name="header" class="header" id="header-id"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'
import Header from './components/layouts/Header'
import Footer from './components/layouts/Footer'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Top,
        header: Header,
        footer: Footer
      }
    }
  ]
})

export default {
  router
}
</script>

<style scoped>
</style>

<template>
  <div>
    <Header class="header" id="header-id" />
    <router-view></router-view>    
    <Footer />
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Top from './components/Top'
import Header from './components/layouts/Header'
import Footer from './components/layouts/Footer'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Top
    }
  ]
})

export default {
  router,
  components:{
    Header,
    Footer
  }
}
</script>

<style scoped>
</style>

  routes: [   
    { 
      path: '/users/:name/posts/:post_id',
      component: UserPostShow,
      name: UserPostDetail
    },
  ]

<template>
  <div>
    <p>名前：{{ $route.params.name }}</p>
    <p>投稿ID：{{ $route.params.post_id }}</p>
    <p>params： {{$route.params}}</p>
    <p>path: {{$route.path}}</p>
    <p>fullPath: {{$route.fullPath}}</p>
    <p>query: {{$route.query}}</p>
    <p>name: {{$route.name}}</p>
    <p>redirectedFrom: {{$route.redirectedFrom}}</p>
    <p>hash: {{$route.hash}}</p>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
}
</style>

  routes: [
    {
      path: '/users/:id(\\d+)',   //ここで正規表現を指定
      component: User,
      name: UserShow,
    },
　　・
　　・
　　・

  routes: [
    //パラメータがあってもなくてもいい
    { path: '/user/:id?' },

    //数値のみ
    { path: '/user/:id(\\d+)' },
    
    //前方一致
    { path: '/user/*' },

    //ディレクトリの一部をオプションにする
    { path: '/user/(company/)?posts' }
  ]