Vue.jsプロジェクト　ルーターの設定

4439 ワード
vue-router Vue.js router-link $router.push Vue.js テキストリンク

ルートの定義

router/index.js
import Home from '/views/Home.vue' //コンポーネント名 from ファイルのパス
import Page from '/views/Page.vue'

 const routes = [
  {
    path: '/',            //urlの末尾を設定
    name: 'Home',         //routeの名前。省略可能。詳しくはrouter-linkのところ
    component: Home       //上でimportした対応させるコンポーネント 大文字に注意！
  },
  { path:'/page',
    name:'firstpage',
    component:Page
  }
]

最初に読み込んでいるファイルはviewsのファイル。src/componentsのほうじゃない！

$router.push


<script>
this.$router.push({name:'SerchResult'})   //path:'〇〇'でも可
</script>

router の機能の一つ。
違うurlに遷移する。書き方はいろいろある。

router-link

Home.vue
<template>
//下の２つはどちらも同じ！
 <router-link to='/page'>firstpageへのリンク</router-link>

 <router-link :to="{name:'firstpage'}">firstpageへのリンク</router-link>
</template>

下のコードのほうが、パスよりわかりやすい（気がする）
若干：があったりして凡ミスしてた。よく見ると違うね。
ルーターリンクも実は、ルータープッシュの機能を内部的に呼んでいるとのこと。
つまり、ルーターリンクを踏むことで、ルータープッシュしている。(公式より)

ルータープッシュとルーターリンク

どちらも、ページを切り替える。

router-link

HTMLのaタグみたいなもの。aタグと違って、ページを遷移しないので、早いように見える。らしい。
HTMLに書いてユーザーがポチッと押す。
templateの中に書く。

router.push

例えば、問い合わせフォームとかから、送信した後に、「送信が完了しました！」のページにうつるときに使う。
もしも。ルーターリンクを使ったら、ユーザーがポチッと押したら、仮に送信できていないくても完了しましたページには移ってしまう。
メソッドの中に書く。