ページ遷移時のアニメーションやページ専用の処理をしたいとき、現在表示しているページ名（ビューファイル名）を取得したい場合があると思います。
このページ名の取得方法について記します。
$routeオブジェクトのname変数から取得
私が思いつく限りでは$routeオブジェクトのname変数で取得する方法があります。this.$route.nameというような記述ですね。
以降は「pages/article.vue」という構造を元に、ビュー「article.vue」のファイル名”article”を取得して処理する例になります。
テンプレートの例
<template>
<div>
<transition name="fade">
<div v-if="this.$route.name === 'article'">
<p>{{ this.$route.name }}</p>
</div>
</transition>
</div>
<template>4行目で現在のビューファイル名を取得し、「article.vue」だった場合にフェードアニメーションさせる例です。（アニメーションCSSは別途必要になります）
JavaScriptの例
export default {
computed: {
// ページ名（ビュー名）を返す
currentViewName: function() {
return this.$route.name;
}
}
}JavaScriptはwatchやmounted()など沢山あるのでcomputedメソッドで使用する場合を例にしました。
middlewareで取得しストアに保存する方法もある
他の例として、Nuxt.jsのmiddlewareを使ってグローバルなストアに保存して取得する方法もあります。
「set-page-name.js」というようなファイルをmiddlewareディレクトリに作成して以下のコードを記述します。
export default function({ store, route }) {
store.commit("setPageName", route.name);
}middlewareファイルでは上記のように、用意されたコンテキスト”store”、”route”を引数に指定してストアやルートにアクセスします。
作成したmiddlewareは忘れずにnuxt.config.jsへ追加します。
module.exports = {
router: {
middleware: ["set-page-name"]
}
}後は以下のように、ストアのstate、mutationsを各ファイルで用意します。
store/state.js：（データ格納用変数の定義）
export default () => ({
pageName: "index"
});store/mutations.js：（セッタの定義）
export default {
setPageName(state, pageName) {
state.pageName = pageName;
}
};こうすることでも「$route.name」と同じく、store.state.pageNameの記述で現在のページ名（ビューファイル名）を取得できます。
どちらを使えばいいか
これは「どのタイミングでページ名（ビューファイル名）を取得したいか」によって変わってきます。
ただ表示したいだけならどの方法でも問題ないかと思いますが、「REST APIでデータを取得できた段階でアニメーションさせたい」といった場合はasyncData()で完了後に取得するなど様々です。
仕様によって取得する方法を適宜変えるのがよろしいかと思いますので、参考用にNuxt.js（Vue.js）のライフサイクルまとめ記事を貼っておきます。