Webサイトの一部にvue-routerを用いたSPA用のページを作成する

Vue.jsでSPAサイトを構築する際に使うvue-routerで、Webサイトの一部のページのみにルーティング機能を実装する方法です。

結構、苦労するかなと思いましたが、基本的にはそのままでよくてリンクを替えるだけでいけました。

SPAを利用するページのHTML

<div id="app">
    <router-link to="/home">Go to Home</router-link><br/>
    <router-link to="/search">Go to Search</router-link><br />
    <a href="/about.html">Go to About</a><br />
    <router-view></router-view>
</div>

JavaScript

const Home = { template: '<p>home page</p>' }
const Search = { template: '<p>search page</p>' }

const routes = [
    { path: '/home', component: Home },
    { path: '/search', component: Search },
]

const router = new VueRouter({
    routes
});

window.onload = function () {
    const app = new Vue({
        el: '#app',
        router
    });
}

SPAページの内容を切り替えたい場合は「router-link」タグを使い、SPAページ以外のページにアクセスする場合は通常の「a」タグを使うことで、目的とした動作が可能です。

• vue-router