【Vue.js】Routerでルーティングする~その2~

前回の記事はこちら↓

スポンサーリンク

固定されたレイアウトを作る

viewに名前を付けて、固定レイアウトを作ることができる。

<router-view name="header"></router-view>

どのパスでアクセスされても同じレイアウトを出すためには、パスのcomponentを
・複数形にする
・オブジェクトにする
ことで、固定レイアウトを表示させることができる。

routes: [{ path: '/home', components: {
        default:Home,
        header:Header
    } },

propsを名前付きviewごとに付ける必要がある。

{ path: '/users/:id', components:{ 
        default:Users,
        header:Header
    }, props: {
        default:true,
        header:false
    },

リダイレクトをする

特定のパスにアクセスされた時、リダイレクトをする方法

{
   path: '/redirect',
   redirect: '/home'
}

オブジェクトで書くことも可能。

{
   path: '/redirect',
   redirect:{
      path:'/home'
    }
 }

アスタリスク(*)を用いることで、全てのパスに適用する事ができる。

{
   path: '*',
   redirect:{
       path:'/home'
    }
}

トランジションをつける

router-viewには、アニメーションをつけることができる。

<transition name="fade">
 <router-view></router-view>
</transition>
<style scoped>
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
</style>

scrollBehavior関数~ページ内スクロール~

WEBサイトでよくある、idの場所までスクロール遷移をする挙動を実装したい。

Vueでは、routerがブラウザの挙動を止めて動的コンポーネントを切り替えているので、スクロール等のブラウザのデフォルト挙動が再現できない。

ページ内スクロールをしたい時は、JSで命令を書き込む必要があるが、VueにはscrollBehavior関数が用意されている。

scrollBehavior(){}

scrollBehaviorは、パスにアクセスした直後に起動するため、トランジションを適用している時としていない時とで、実行命令を変えなければいけない。
下記では、トランジションをかけていない想定でコード例を挙げます。

selectorを用いて、スクロールしたいid名を指定する。

scrollBehavior() {
  return {
    selector:"#content"
  };
}

id要素にピッタリしてしまうため、offsetを用いてスクロール位置を調整することができる。

scrollBehavior() {
  return {
    selector:"#content",
    offset: { x: 50, y: 60 }
  };
}

また、 scrollBehavior()  には引数を3つ取ることができる。

scrollBehavior(to,from,savedPosition) 

to,from…$routeでアクセスできるもの
savedPosition …前のページに戻る時、前回のページのポジションを記憶している。

scrollBehavior(to,from,savedPosition) {
// 前のページに戻る時に前回のポジションを再現する。
  if(savedPosition){
       return savedPosition;
  }
// $routeページ内にハッシュ(#)があったらスクロールを行う。
  if(to.hash){
        return {
           selector: to.hash,
           offset: { x: 50, y: 60 }
         };
   }
}

タイトルとURLをコピーしました