Vue.js入門基礎から実践アプリケーション開発までの4.2節をCodeSandboxで写経していて、つまづいたのでメモです。

やろうとしたこと

4.2節では、VueRouterにより、シンプルなSPAを実装します。テキストでは、一つのhtmlファイルにJavaScriptのコードも含めて実装しています。一方、今回やろうとしたことは、JavaScriptコードをjsファイルに記述する、すなわち、htmlとjsファイルを分割して実装しようとしました。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>CodeSandbox Vue</title>
  </head>

  <body>
    <div id="app">
      <router-link to="/top">トップページ</router-link>
      <router-link to="/users">ユーザー一覧ページ</router-link>
      <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js(NG)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import VueRouter from "vue-router";

Vue.config.productionTip = false;

var router = new VueRouter({
  routes: [
    {
      path: "/top",
      component: {
        template: "<div>トップページです。</div>"
      }
    },
    {
      path: "/users",
      component: {
        template: "<div>ユーザー一覧ページです。</div>"
      }
    }
  ]
});

/* eslint-disable no-new */
new Vue({
  router: router
}).$mount("#app");

NGの結果

router-linkが効かず、「トップページ」と「ユーザー一覧ページ」というテキストが表示されるだけのページが描画されました。

NGの原因

main.jsで、VueRouterプラグインを使用する宣言をしていなかったことが原因です。

解決法

main.jsで VueRouterインスタンスを生成する前に Vue.use(VueRouter) により、 VueRouterプラグインの使用を宣言します。

main.js(OK)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import VueRouter from "vue-router";

Vue.config.productionTip = false;

Vue.use(VueRouter);

var router = new VueRouter({
  routes: [
    {
      path: "/top",
      component: {
        template: "<div>トップページです。</div>"
      }
    },
    {
      path: "/users",
      component: {
        template: "<div>ユーザー一覧ページです。</div>"
      }
    }
  ]
});

/* eslint-disable no-new */
new Vue({
  router: router
}).$mount("#app");

結果

期待通り、トップページとユーザー一覧ページにハイパーリンクが適用され、それらをクリックすると、それらに対応したページが描画されました。

参考

vue-routerのGItHub リポジトリで公開されているサンプルコードが参考になりました。 vue-router/examples/basic/app.js

024号文書

主にプログラミング

jsファイルでvue-routerを使う場合、Vue.useが必要