vue-routerについて

投稿日：2019年6月22日更新日：2019年12月8日

vueでのルーティングに関して。

Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。

ただその場合でも擬似的なルーティング(URLの切り替えなどに関してSPAのページの切り替え)などは必要になってきます。

Contents

1 Vue Routerのインストール
2 ソース
3 devtoolインストール
4 参考リンク

Vue Routerのインストール

vueでRoutingを使う場合、vue-routerというライブラリをインストールする必要が出てきます。

npm install --save vue-router

1	npm install --save vue-router

ソース

https://github.com/umanari145/vue/blob/master/vuecompo_sample2/

必要な部分のみ記述すると下記のようになります。

src/app.js(起動部分のJS)

import Vue from 'vue'
import axios from 'axios';
import $ from 'jquery';

import router from './router.js'

window.$ = window.jQuery = $;
window.Vue = Vue
window.axios = axios

new Vue({
    el:'#app',
    router
})

import Vue from 'vue'

import axios from 'axios';

import $ from 'jquery';

import router from './router.js'

window.$ = window.jQuery = $;

window.Vue = Vue

window.axios = axios

new Vue({

el:'#app',

router

})

src/router.js(ルーティングのJS)

mport Vue from 'vue'
import VueRouter from 'vue-router'

import regist from './component/member/regist.vue' //それぞれのコンポーネント
import edit from './component/member/edit.vue'
import list from './component/member/list.vue'


Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path:'/',
            component:list
        },
        {
            path:'/regist',
            component:regist
        },
        {
            path:'/edit/:hash_key',
            component:edit
        }
    ]
})

export default router

mport Vue from 'vue'

import VueRouter from 'vue-router'

import regist from './component/member/regist.vue' //それぞれのコンポーネント

import edit from './component/member/edit.vue'

import list from './component/member/list.vue'

Vue.use(VueRouter)

const router = new VueRouter({

routes:[

{

path:'/',

component:list

{

path:'/regist',

component:regist

{

path:'/edit/:hash_key',

component:edit

}

]

})

export default router

index.html(htmlファイル)

<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue</title>
</head>
<body>
	<div id="app" v-cloak>
        <router-view></router-view>
    </div>
<script src='./dist/build.js'></script>
</body>
</html>

<html>

<head>

</head>

<body>

<router-view></router-view>

</div>

</body>

</html>

devtoolインストール

今回の件とは関係ありませんが、ルーティングや変数の情報などをみれるdevtoolを。

構築が面倒だと思って懸念してましたが、ものすげー簡単でした・・・もっと早くやればよかった・・

Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう！

参考リンク

Vue.jsにVue Routerを導入してルーティングを行う方法

vue-routerで動的リンクを生成する