Vue.js vue-routerの簡単なサンプルコード

Vue.js vue-routerの簡単なサンプルコード

vue-routerでページ遷移を実現する簡単なサンプルコードです。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1

※ubuntu19.10にnodeのインストールはこちら

プロジェクト作成

r-testという名前でプロジェクトを作成します

? Install vue-router? Yesとし vue-router を利用します。

router利用

routerを利用して/testページに遷移させてみる

src/component内にTest.vueを作成します

src/router内のindex.jsを下記の通りに編集します

src/component内のHelloWorld.vueもtestページにリンクできるように、htmlを少し修正します

起動して確認してみる。

ブラウザよりhttp://localhost:8080にアクセスすると下記の画面が表示される

testページへのリンクをクリックすると

http://localhost:8080/#/testにリンクします。