前回の記事はこちら↓
固定されたレイアウトを作る
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() には引数を３つ取ることができる。
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 }
};
}
}
