下書きが上限に達しているので仮の状態で投稿しています
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内
#URLによって動的コンポーネントのようになる
URLの＃を消す方法
new Routerにmode:"history"
URLを切り替える方法
リンク
#中身は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.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" あり
コンポーネントで
queryを設定できる
例
次のユーザー
名前付きビューで複数の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をトランジションで囲むことで適用できる
例
特定のidを持つ要素までスクロールするために、URLにハッシュ(#)をつける
例
次のユーザー
#クリックしたら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)で遷移をキャンセル
}
}
遅延ローディング ＃後で記述する