PlusOne Blog

Vue.router使用時に、ヘッダー／ナビメニュー／背景画像の処理をおこなったときの備忘録
　

Routerインスタンス

router.jsで生成したRouterインスタンスはthis.$routerで参照することができます。

■router.push

■router.replace

指定したパスに遷移します。
両者の違いは、遷移するのに履歴を上書きするかどうかです。「push」は履歴を上書しません。一方、「replace」は履歴を上書きします。

　　this.$router.push('/test1');
　　this.$router.replace('/test1');

■router.go

指定したページ分、進みます。マイナスの数字を指定すると、その分ページが戻ります。

　　this.$router.go(2);

■router.back

ページを戻します。

　　this.$router.back();

■router.foward

ページを勧めます。

　　this.$router.foward();

例

　　methods: {
            forward () {
                // test1へ遷移
                this.$router.push('/test1')
            },
            replace () {
                // test1へ遷移
                this.$router.replace('/test1')
            },
            forwardDouble () {
                // 2つ先へ
                this.$router.go(2)
            },
            backDouble () {
                // 2つ前へ
                this.$router.go(-2)
            },
            forward () {
                // 1つ前へ
                this.$router.forward()
            },
            back () {
                // 1つ先へ
                this.$router.back()
            }
        }           

　　<button @click="forward">/test1へ遷移</button>
　　<button @click="replace">/test1へ遷移</button>
　　<button @click="forwardDouble">2ページ先へ移動</button>
　　<button @click="backDouble">2ページ前へ移動</button>
　　<button @click="forward">1ページ先へ移動</button>
　　<button @click="back">1ページ前へ移動</button>

router-link

指定したページを表示する場合は、router-linkコンポーネントを使用します。

■router-link

　　<router-link to="/test">TESTページ</router-link>

　↓HTMLに展開すると a タグで展開されます。

　　<a heref="/test" ....>TESTページ</a>

　
aタグではなく別のタグとして展開したい場合はtagプロパティを使用します。

　　<router-link to="/test" tag="li">TESTページ</router-link>

■#router-link-active

toでバインドしたパスが、現在のパスに含まれている場合に付与されます。例えば/detailを指定したリンクは、/detail, /detail/001, /detail/002のときは付与されます。

■#router-link-exact-active

toでバインドしたパスと現在のパスが完全に一致した場合に付与されます。同じ例で考えたときに、/detail/001, /detail/002ではrouter-link-exact-activeは付与されません。
　

exactプロパティを指定すると、パスが完全一致の場合にのみrouter-link-activeクラスが付与されるようになります。

　　<router-link to="/" exact>TESTページ</router-link> 

active-class, exact-active-class に、特定にクラス名を付与できます。active-class, exact-active-classプロパティにクラス名を指定します。

　　<router-link to="/" active-class="active-link" exact-active-class="exact-active-link">TESTページ</router-link> 

ルートオブジェクト

ルートオブジェクトには現在アクティブなルートの情報となり、this.$routeとして利用することができます。

■$route.path

現在表示しているパスを返します。

　　$route.path

パスが特定のときに、特定の class を付けるときは、次のように記述すればよい。
（表示中のパスが「/」のとき、class 「toppage」を付ける）

　　<nav class="dtnavi" :class="{'toppage': $route.path === '/'}">

■$route.name

現在表示しているパスのnameを返します。

　　$route.name

■$route.params

動的なルーティングで設定したパラメータオブジェクトを返します。

　　$route.param

■$route.query

現在表示しているパスのクエリ（?の後に続くテキスト）を返します。

　　$route.query

■$route.fullPath

現在表示しているパスのフルパスを返します（クエリを含む）

　　$route.fullPath