Vue Routerの使用方法まとめ

VueJS

※SPAで試しています。

$router.push()

name指定

this.$router.push({ name: name, query: { id: id } })
// または
this.$router.push({ name: name, params: { id: id } })

遷移のhistoryを遡る場合は、$router.goを使用する。

router-linknuxt-link(NuxtJS)も同じコンポーネントの場合は、遷移が走らないので注意が必要です。

path指定

this.$router.push({ path: path })
// または
this.$router.push(path)

beforeRouteLeave()

別コンポーネントに遷移する場合

beforeRouteLeave (to, from, next) {
  next() // Hookを解決する = 次の遷移を行う
},
beforeRouteLeave (to, from, next) {
  if (OK?) {
      someFunc(to, from, next) // この中でnext()または、$router.push()を行う
  } else {   
    next() // Hookを解決する = 次の遷移を行う
  }
},

beforeRouteUpdate()

同じコンポーネントで、paramsのみを変更する場合

beforeRouteUpdate (to, from, next) {
  next() // Hookを解決する = 次の遷移を行う
},

遷移させずに、何か処理を入れ込む場合は、

beforeRouteUpdate (to, from, next) {
  if (OK?) {
      someFunc(to, from, next) // この中でnext()または、$router.push()を行う
  } else {   
    next() // Hookを解決する = 次の遷移を行う
  }
},

Error: Navigation aborted...

Error: Navigation aborted from "/〇〇" to "/〇〇" via a navigation guard.
next(false)

を消す

$root.data

直接、Vue Routerとは関係ない。

Vueオブジェクトにdataを定義し、どこからでも呼び出せるようにする。
意図としては、App.vueとPage.vueで初期化の処理を書いている場合、Page.vueでリロードした際に、Page.vueのcreatedが先に発生し、App.vueでの共通の初期化が機能しないため。(非推奨)

  new Vue({
    data: {
      isLoaded: false
    },
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
watch: {
  isLoaded (newVal) {
    if (newVal) {
      this.someFunc()
    }
  }
},

computed: {
  isLoaded () {
    return this.$root.isLoaded
  }
},

location.href

同じコンポーネントの場合、paramsqueryを変更しても、created関数が機能しないため、watchなどを使うか画面をリロードする。watchを使用する場合、初期化に必要な処理は、initDataなどでまとめておくこと。

location.href = `/list?user_id=${this.userId}`

location.reload()

reload()メソッドは、現在のドキュメントをリロードするために使用されます。
reload()メソッドは、ブラウザのリロードボタンと同じように機能します。

location.reload()

参考