vue路由名字不變,僅query發生變化,點選返回頁面不重新渲染
阿新 • • 發佈:2018-12-04
方式一:可以用watch+vuex
watch: {
'$route': function (to, from) {
// 我這裡還是用了Vuex,不過應該不影響理解
this.$store.dispatch('updateActiveTemplateId', this.$route.query.templateId)
// 通過更新Vuex中的store的資料,讓資料發生變化
this.getTemplateById()
}
},
方式二:可以使用watch+時間戳的方法(此方法,即使統一路由名+同一query,點選時也會重新渲染頁面,傳送請求)
個人喜歡這一種,因為,他是在主頁面Home.vue加的,而不是在每個頁面需要的頁面加
<template> <div id="home"> <top class="header" v-if="$store.state.isHeader"></top> <article> <router-view :key="activeDate"/> </article> <bottom class="footer" v-if="$store.state.isFooter"></bottom> </div> </template>
watch: {
$route: {
handler() {
this.activeDate=new Date().getTime()
},
immediate: true
}
},
方式三:導航守衛中的元件守衛(這個是針對某個元件的)
beforeRouteUpdate (to, from, next) { // 在當前路由改變,但是該元件被複用時呼叫 // 舉例來說,對於一個帶有動態引數的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候, // 由於會渲染同樣的 Foo 元件,因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。 // 可以訪問元件例項 `this` },
vue-router官方地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB