Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
json
.htaccess
README.md
app.js
index.html
screenshot.png

README.md

Vue Router の例

ナビゲーションのリンクをクリックすると、ページのコンテンツが切り替わります。コンテンツの内容は json フォルダーに保存されており、 ルートが変わるたびに Ajax 通信で読み込まれます。スクリーンショットは次のとおりです。

スクリーンショット

解説

History API を利用するために、VueRouter のコンストラクターの引数で history: true を指定します。

var router = new VueRouter({
  history: true,
  root: '/vue-example'
})

ルートのパラメーターは $route.params で受け取ります。

router.map({
  '/:name': {
    component: {
      template: '<p>{{$route.params.name}}</p>'
    }
  }
})

template で使う変数を加工するために、トランジションフックの data メソッドを使います。

router.map({
  '/': {
    component: MyComponent
  },
  '/:name': {
    component: {
      route: {
        data: function (transition) {
          transition.next({name: this.$route.params.name})
        }
      },
      template: '<p>{{name}}</p>'
    }
  }
})
You can’t perform that action at this time.