vue-routerは先に定義されたルートほど優先度が高いと言うお話。

#vue-routerの優先度は先に定義されたものが高くなる
はい、少しハマりました。

##ハマった点はこちら
※一部省略しています。

```router/index.js
const routes = [
    {
        path: '/',
        component: App,
    },
    {
        path: '/:path',
        name: 'week',
        component: Weekly,
    },
    {
        path: '/request',
        name: 'request',
        component: Request
    },
]
```
最初はこんな感じで書いていました。
上から順に
・homeのパス
・動的にルートを変更
・requestへのパス

こんな感じですね。
どうしてハマったかと言いますと、追加機能を```/request```で定義してたんですね。
だけど、タイトルの通りvue-routerは先に定義されたルートの方が優先度高いので、同じものがあったら先に定義されたルートをマッチさせるんですね。

```router/index.js
const routes = [
   {
     path: '/:path',
     name: 'week',
     component: Weekly,
   }
]
```
こいつですね。こいつにマッチしていたので```Weekly```コンポーネントが表示されてしまっていました。

その元となる原因がこちら。

```top.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    @include('common.head')
</head>
<body>
    <div id="app">
        <header>
            <the-header-component />
        </header>
        <main>
            <router-view />
        </main>
    </div>
</body>
</html>

```

```TheHeaderComponent.vue
<template>
    <div class="header">
        <a href="/">TODOdo?</a>
        <div class="request_link_container">
            <router-link to="/request">
                ご意見・ご要望
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
   
}
</script>
```
こんな感じです。
headerに```<router-link to="/request">```を設定しているのですが、/requestに遷移した際、マッチするルートを探し始めます。
上から順に〜〜

```router/index.js
const routes = [
    {
        path: '/',
        component: App, // マッチしませーーーーん！！！ next next!!!!!
    },
    {
        path: '/:path',　// こいつがあんじゃん！！！！！！
        name: 'week',
        component: Weekly,
    },
    {
        path: '/request', // 本来はこっち！！！！！！
        name: 'request',
        component: Request
    },
]
```
ってな風に```Weekly```コンポーネントが表示されてしまっていました。
なので単純に順番を変えて解決しました。

##404の設定
じゃあ、404の設定はどうするんだ？となりました。
ちなみにこんな感じで、本来は曜日に関するパスでしか```Weekly```コンポーネントを表示させたくない。
だけど、このままではどんなパスでも```Weekly```コンポーネントが表示されてしまう。

```app.vue
<template>
  <div class="weekly_card_container">
    <div v-for="(week, index) in weeks" :key="index">
      <router-link class="weekly_card" :to="{ name : 'week', params : { path: week.path }}">
        <div class="weeklytext">
          {{week.week}}曜日
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weeks: [
        {path: 'mon', week: '月'},
        {path: 'tue', week: '火'},
        {path: 'wed', week: '水'},
        {path: 'thu', week: '木'},
        {path: 'fri', week: '金'},
        {path: 'sat', week: '土'},
        {path: 'sun', week: '日'}
      ],
    }
  }
</script>
```

なので使いましたよ。
ナビゲーションガードを。

##ナビゲーションガード

```router/index.js
const routes = [
    {
        path: '*',
        component: NotFound
    },
    {
        path: '/404', 
        component: NotFound
    },
    {
        path: '/',
        component: App,
    },
    {
        path: '/request',
        name: 'request',
        component: Request
    },
    {
        path: '/:path',
        name: 'week',
        component: Weekly,
        beforeEnter: (to, from, next) => {
            const weekArray = ['mon','tue','wed','thu','fri','sat','sun']
            const week      = to.params.path
            if (weekArray.indexOf(week) >= 0) {
                next()
            } else {
                next('/404')
            }
        }
    },
]

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

export default router
```


この```beforeEnter```と言うものですね。
[ナビゲーションガード(beforeEnter)](https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%83%AB%E3%83%BC%E3%83%88%E5%8D%98%E4%BD%8D%E3%82%AC%E3%83%BC%E3%83%89)

やってることは簡単です。
パスが曜日に関するものでなければ```404```のページを表示させるようにしています。

ただ、もっと良い方法がありそうな気がします。。。

##まとめ
vue-routerは先に定義されたルートほど優先度が高いと言うお話でした。
ドキュメントは読む！！これにつきますね。

もっとこうした方がいいなどのアドバイスや、その考え方は間違っているなどあればご指摘いただければ嬉しく思います。