ルートの定義
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>
//下の2つはどちらも同じ!
<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
例えば、問い合わせフォームとかから、送信した後に、「送信が完了しました!」のページにうつるときに使う。
もしも。ルーターリンクを使ったら、ユーザーがポチッと押したら、仮に送信できていないくても完了しましたページには移ってしまう。
メソッドの中に書く。