Vue routerについて調べたこと

vue routerについて

• ルーター対応アプリで、ユーザーナビゲーションを有効にするためのコンポーネント
• ターゲットの場所は、toプロップで指定する

<router-link to="/foo">Go to Foo</router-link>

使用するコンポーネント

Vue Routerでは、二つのコンポーネントを使う
1. router-link・・・リンクを作成するためのもの
2. router-view・・・それぞれのリンク先に基づいた内容を表示するためのもの
3. router-viewが、/だったら、routervieの中身がHome.vueになり、/Usersであれば、Users.vueになる
4. URLの内容によって、router-viewの中身が変わる、動的コンポーネントのようなもの a

使用するに当たって設定すべき事項

• Vue.use()とすることでプラグイン(router)を使用できるようにする (Vue.jsが公式で提供してるプラグインを使うためのもの)

router.js

 import Router from "vue-router";
Vue.use(Router)

• 表示させたいページを作る(HomeとUsersの2ページ作ってみます)

Home.vue

<template>
 <div>
   <h3>Home</h3>
 </div>
</template>

Users.vue

<template>
 <div>
   <h3>Users</h3>
 </div>
</template>

• 表示させたいページへのルートをかく
  • このURLの場合は、このコンポーネントを表示する、というもの
  • URLとコンポーネントをマッピングする作業
  • routesは配列になっててその中はオブジェクトでかける

router.js

 new Router({
    routes:[{path: '/', component: 'Home'}, {path: '/users.vue', component: 'Users'}]
  })

• 最初のページをHomeにするが、作成したHome.vueをインポートさせる必要がある

router.js

import Home from './Home.vue';

• new Routerをexport させる

router.js

export default new Router({
    routes:[{path: '/', component: 'Home'}, {path: '/users.vue', component: 'Users'}]
  })

• routerの中身をvue.jsに適用させる
• main.jsの中で、ルーターの中身をVue.jsに適用させる
  • routerの中身は、router.jsの中で、export defaultしてる部分
• new Vue　のなかでrouterを登録する
  • (router.jsで書いた)Vue.useとかくことで、使用できるようになる

main.js

//⬇︎ここ
import router from './router.js';

new Vue ({
//⬇︎ここ
 router: router,
 render:h =>(App)
}).$mount('#app');

ここまで書いても、そのままURLにHomeやUsersと書いても、App.vueが表示されてしまう
ので、どうするかというと、、

App.vue

<template>
 <div>
<!-- 動的コンポーネント的な動きをする -->
  <router-view></router-view>
 </div>
</template>

その上で、urlにUsersなどと入力すると、Usersページを表示することができる
つまり、URLの内容によって、<router-view>の表示するものが変わってくる！ということです

ちなみに。。　

• そのままでは、URLに#がついて、それ以降にUserと入力すると、 の部分にUsersのコンポーネントが表示されるが、この#を表示したくない場合は、 router.jsの部分に、mode:'history'と書くことで、#が消えた状態でURLを表示することができる
• しかし、毎回index.htmlを返す、という処理を書いておかないとerrorがでる

router.js

Vue.use(Router);
export default new Router({
//⬇︎こんな感じ
 mode:'history',
 routes:[{path: '/', component: 'Home'}, {path: '/users.vue', component: 'Users'}]
  })