Vue.jsまとめ12　VueRouter

下書きが上限に達しているので仮の状態で投稿しています

npm install vue-router　でインストール

srcに　router.js を作成
router.js内
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router) #useはプラグインを適用している

new Router({
 routes: [{path: "/",components: Home},{path: "/users/:id", components:Users} #pathの最初に/必須
})

main.js内
import ~
new Vueのなかに
router

App.Vue内
<router-view></router-view> #URLによって動的コンポーネントのようになる

URLの＃を消す方法
new Routerにmode:"history"

URLを切り替える方法
<router-link to="/url">リンク</router-link>　
#中身はaタグ、別のタグにしたいなら tag="タグ名" を追加

属性
active-class="クラス名" #アクティブな時にクラスを追加
urlが前方一致ならアクティブになる #exact属性をつければ完全一致になる

コードからURLを切り替える方法
templateで
@click="関数名"　など
scriptで
mehtods:{
 関数名(){
  this.$router.push({ path: "url"});
 }
}

パラメータが変わった時にライフサイクルフックは呼ばれない

動的なURL
router.js で
routes:[
 { path: "/users/:名前", component: Users } #:によって動的なURLになる
]
コンポーネントでパラメータを使いたい時は {{ $route.params.名前 }} でアクセスできる

ルートコンポーネントの再利用性を損なわないようにする
{{ $route.params.名前 }}　は三つ結合で使いにくい。
→router.jsのroutesオブジェクト内に props: true の要素を追加で名前の部分をpropsで渡せる
Vueコンポーネントのexport内で props: ["名前"] とすることで{{ 名前 }}で使えるようになる

<router-view>で呼び出したコンポーネント内の<router-view>は動かない
→動かしたい場合はrouter.js内で動かしたいコンポーネントをimportして routes のオブジェクトに
childrel: [
 { path: "url", component: 名前 } #childrenではpathに/を付けない
]

router-linkのtoを :to とすることで動的に表現できる
:toではrouter.jsでnameを設定して使うことができる。
router.jsで
 { path: "url", component: コンポーネント名, name: "名前" } 
コンポーネントで
router-link :to="{ name: '名前' }"

パラメータが必要ならparamsを設定する
例
router.jsで
 { path: "profile", component: UsersProfile, name: "users-id-profile" }　#childrenの上位に path: "/users/:id" あり
コンポーネントで
<router-link :to="{ name: 'users-id-profile', params: { id: Number(id) + 1 }>次のユーザー</router-link> 
#パラメータが複数必要な時のためにオブジェクトで作成

queryを設定できる
例
<router-link id="next-user" :to="{ name: 'users-id-profile', params: { id: Number(id) + 1 }, query: { lang: 'ja', page: 2 }}">次のユーザー</router-link>

名前付きビューで複数のrouter-linkを使える
router-link name="名前付きビュー"
router.jsで
名前付きビューにしたいコンポーネントをインポート
path: "url",
components:{ #componentが複数形になり、オブジェクトに
 default: 元のコンポーネント名,
 名前付きビュー: インポートしたコンポーネント
}

名前付きビューを使用する場合はrouter.jsのpropsをオブジェクトにし、それぞれを設定する
props:{
 default: true,
 名前付きビュー: false
}

リダイレクト機能
router.jsで
path: "*", #*は設定してない全ての場合
redirect: "/"

router-viewをトランジションで囲むことで適用できる
例    
<transition name="fade" mode="out-in">
 <router-view></router-view>
</transition>

特定のidを持つ要素までスクロールするために、URLにハッシュ(#)をつける
例
<router-link id="next-user" :to="{ name: 'users-id-profile', params: { id: Number(id) + 1 }, query: { lang: 'ja', page: 2 }, hash: '#ハッシュ名' }">次のユーザー</router-link>
#クリックしたらURLに #ハッシュ がつき、id="ハッシュ名" を持つところまでスクロールされる、現状では不十分でscrollBehavior関数を使用する

scrollBehaviorの設定
router.jsのnew Routern内にsclollBehavior()を記述
トランジションがない場合
scrollBehavior(){
 return{
  selector: "#ハッシュ名",
  offset: {x:0, y:100} #100pxの余白をとる
 }
}

sclollBehavior(to, from, savedPosition)の三つの引数を活用

toには移動前の情報（$route）、fromには移動後の情報($route)
例
sclollBehavior(to, from, savedPosition){
 if(to.hash){
  return{
   selector: to.hash
  }
 }
}

savedPositionにはどこまでスクロールしたかを保存
一般的な記述法は
sclollBehavior(to, from, savedPosition){
 if(savedPosition){
  return savedPosition;
 }
}

トランジションがある場合（発展）
非同期で実行することで適切な動きにする　＃後で

ナビゲーションガード

全ページの遷移前に、特定の処理をしたい　beforeEachガード
例
main.jsで
router.beforeEach((to, from, next) => {
 if(to.path === "/users/1"){
  next({ path: "/" });
 }
 next(); #nextで次に遷移するので必須
}

特定ページの遷移前に、特定の処理をしたい beforeEnterガード
例
router.jsの routes内で beforeEnter を設定

コンポーネントに設定できる３つのナビゲーションガード
コンポーネントのexportに記述
それぞれの例
#Enter　作成前に実行　thisは使えない
beforeRouteEnter(to, from, next){
 next(vm =>{
  console.log(vm.id) #vmはアクセスできるようになった瞬間に実行される、非同期的な処理
 })
}
#Update 新しいコンポーネントが追加されないような遷移をした時
beforeRouteUpdate(to, from, next){
 next()
}
#Leave　離れる時に実行
beforeRouteLeave(to, from, next){
 const isLeave = window.confirm("本当にこのページを離れますか？");
 if(isLeave){
  next();
 }else{
  next(false); #next(false)で遷移をキャンセル
 }
}

遅延ローディング　＃後で記述する