【Nuxt 2】ルーティング
ルーティング
ルーティングの基礎
NuxtJS では、/pagesフォルダの構成によってルーティングが決まります。
プロジェクト作成時からあるindex.vueは、http://localhost:3000でアクセスしたときのページになります。
ここにabout.vueを追加すると、http://localhost:3000/aboutのページとなります。
このように、NuxtJS ではファイル名がそのままルーティングのパスとして紐づけられます。
これはファイルだけでなく、フォルダにも適用されます。
例えば/web/about.vueとファイルを作成すると、http://localhost:3000/web/aboutとネストされたページとなります。
パスパラメーター
_slug.vueのように先頭にアンダーバーを付けると、slugという名前のパスパラメーターを持つページとなります。
http://localhost:3000/vue-postとアクセスすれば、パスパラメーターはslug = 'vue-post'となります。
パスパラメーターへのアクセス方法については後述します。
パスパラメーターの注意点として、SSG でページを作成する際、デフォルトの設定ではこのファイルは作成されません。
nuxt.config.jsでビルド時の設定が必要になりますが、ここでは詳細は割愛させてもらいます。
無効なページ
-about.vueのように先頭にハイフンを付けると、そのページは無効となり表示されなくなります。
リンク
Nuxt Link
NuxtJS では、自サイトのページ遷移にNuxtLinkというコンポーネントを使用します。
例えば、/aboutへのリンクは以下のように記述します。
<nuxt-link to="/about">about</nuxt-link>NuxtLinkは<a>で展開されます。
<a href="/about">about</a>アクティブリンク
NuxtLinkには、現在のパスに応じて.nuxt-link-exact-activeと.nuxt-link-activeの 2 つのクラスが付与されます。
.nuxt-link-exact-activeは、パスが一致するリンクに付与されます。
一方.nuxt-link-activeは、パスが一致するリンクとその親のリンクに付与されます。
例えば現在のパスが/web/page1の場合、以下のような結果になります。
NuxtLink | .nuxt-link-exact-active | .nuxt-link-active |
|---|---|---|
/ | - | ● |
/about | - | - |
/web | - | ● |
/web/page1 | ● | ● |
/web/page2 | - | - |
これを使ってアクティブなリンクのスタイルを適用することができます。
注意が必要なのは、.nuxt-link-activeは必ずルートパスに付与されるということです。
これを除外したい場合は、exactプロパティを指定します。
これによって.nuxt-link-activeはパスが一致した場合のみ付与されるようになります。
つまり.nuxt-link-exact-activeと同じ条件で付与されます。
<nuxt-link to="/" exact>index</nuxt-link>プロパティ
NuxtLinkには以下のようなプロパティがあります。
| プロパティ | 型 | 説明 |
|---|---|---|
to | String, Object | 遷移先のパスを指定 |
replace | Boolean | ページヒストリーを残さず遷移する |
append | Boolean | 相対パスでtoが設定できるようになる |
tag | String | <a>でなく、別の指定したタグに置き換える |
exact | Boolean | 上述の通り |
active-class | String | .nuxt-link-activeを別のクラスに置き換える |
exact-active-class | String | .nuxt-link-exact-activeを別のクラスに置き換える |
appendプロパティについてのみ補足しておきます。
例えば、/webから/web/page1へ遷移するリンクを作るとします。
通常であれば、
<nuxt-link to="/web/page1">page1</nuxt-link>としますが、appendを指定すると以下のようにパスを省略できます。
スラッシュがないのがポイントです。
<nuxt-link to="page1" append>page1</nuxt-link>$router
ルーターインスタンス
NuxtJS にはルーターインスタンスというものがあり、ページ遷移に関するメソッドが定義されています。
ルーターインスタンスは、$routerでアクセスでき、以下のメソッドを持ちます。
| メソッド | 使用例 | 説明 |
|---|---|---|
push | this.$router.push('/about') | 指定したパスに遷移 |
replace | this.$router.replace('/about') | ページヒストリーを残さずに指定したパスに遷移 |
go | this.$router.go(1) | 指定した数値分ページを進める 負の数値を指定した場合はその数だけ戻る |
back | this.$back() | 1 つ前のページに戻る |
foward | this.$foward | 1 つ次のページに進む |
クエリパラメーター
$router.push()でクエリパラメーターを指定する方法として、以下のようにオブジェクトを指定することができます。
this.$router.push({
path: '/query',
query: {
id: 1,
name: 'Taro',
},
})http://localhost:3000/query?id=1&name=Taro$route
$routeはクエリパラメーターなどのルーティングの情報をもつインスタンスです。
主に以下のプロパティを持ちます。
| プロパティ | 説明 |
|---|---|
path | 現在のパス |
fullPath | 現在のフルパス |
params | パスパラメーター |
query | クエリパラメーター |
パスパラメーターやクエリパラメーターを取得するには、以下のようにします。
//パスパラメーター
const slug = this.$route.params.slug
//クエリパラメーター
const id = this.$route.query.id