◀ 12.

【Vue.js】ルーティング設定

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

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: リダイレクトさせたい場合、リダイレクト先を指定する。

 

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. on:click クリック時のイベント処理
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法

人気ページ

最近更新/作成されたページ