タイトル: ルーティング設定

SEOタイトル: 【Vue.js】ルーティング設定

Vue.jsのルーティング設定を説明します。

aタグ等のhtml側の説明はこちらを参照。

Javascript

const router = new VueRouter({
mode: 'history',
routes: [
{

path: '/top',

component: require('./components/Top.vue'),

redirect: '/channels',
},

{ path: '/channels', component: require('./components/Channels.vue') },
]
})

mode: ハッシュモードとヒストリーモードの2種類がある。デフォルトはハッシュモード。

ハッシュモードにするとURLに # が含まれる。（例: http://localhost:8000/top#/）

path: 実際のパス。パラメータを受け取りたい場合は以下の様にする。

javascript側: path: '/channel/:id'

html側: <router-link :to="`/channel/${id}`">

component: 呼び出されるプログラム。

redirect: リダイレクトさせたい場合、リダイレクト先を指定する。