Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

import Vue from 'vue'
import VueRouter from 'vue-router'
import BlogEdit from '../components/BlogEdit'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/addBlog',
    name: 'AddBlog',
    component: BlogEdit
  },
  {
    path: '/editBlog',
    name: 'EditBlog',
    component: BlogEdit
  }
 
]
 
const router = new VueRouter({
  routes
})
 
export default router

<template>
  <div id="app">
    <div id="nav">
      <!--<router-link to="/">Home</router-link> |-->
      <!--<router-link to="/about">About</router-link>-->
      <router-link :to="{name: 'AddBlog'}">创建博客</router-link>
      |
      <router-link :to="{name: 'EditBlog'}">修改博客</router-link>
    </div>
    <router-view/>
  </div>
</template>
 
<style>
<!-- 省略 -->
</style>

<template>
  <div class="outer">
    <div>
      这是BlogEdit
    </div>
  </div>
</template>
 
<script>
import LifeCycle from '../mixins/LifeCycle'
 
export default {
  name: 'BlogEdit',
  mixins: [LifeCycle]
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

export default {
  computed: {
    name () {
      return this.$options.name
    }
  },
  created () {
    console.log('created ==> ' + this.name)
  },
  activated () {
    console.log('activated ==> ' + this.name)
  },
  deactivated () {
    console.log('deactivated ==> ' + this.name)
  },
  destroyed () {
    console.log('destroyed ==> ' + this.name)
  }
}

export default {
  beforeRouteEnter (to, from, next) {
    // 无法访问this
    console.log('beforeRouteEnter ==> 来自：' + from.path)
    console.log('beforeRouteEnter ==> 去往：' + to.path)
    next(true)
  },
  beforeRouteUpdate (to, from, next) {
    console.log(this.$options.name + '：beforeRouteUpdate ==> 来自：' + from.path)
    console.log(this.$options.name + '：beforeRouteUpdate ==> 去往：' + to.path)
    next(true)
  },
  beforeRouteLeave (to, from, next) {
    console.log(this.$options.name + '：beforeRouteLeave ==> 来自：' + from.path)
    console.log(this.$options.name + '：beforeRouteLeave ==> 去往：' + to.path)
    next(true)
  }
}

<template>
  <div class="outer">
    <div>
      这是BlogEdit
    </div>
  </div>
</template>
 
<script>
import LifeCycle from '../mixins/LifeCycle'
import NavigationGuard from '../mixins/NavigationGuard'
 
export default {
  name: 'BlogEdit',
  mixins: [LifeCycle, NavigationGuard]
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

<template>
  <div class="outer">
    <div>
      这是BlogEdit
    </div>
  </div>
</template>
 
<script>
import LifeCycle from '../mixins/LifeCycle'
 
export default {
  name: 'BlogEdit',
  mixins: [LifeCycle],
  watch: {
    $route (to, from) {
      console.log('组件：' + this.$options.name)
      console.log('来自：' + from.name)
      console.log('去往：' + to.name)
    }
  }
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

<router-view :key="$route.fullPath"></router-view>

<router-view :key="$route.fullPath"></router-view><template>
  <div id="app">
    <div id="nav">
      <!--<router-link to="/">Home</router-link> |-->
      <!--<router-link to="/about">About</router-link>-->
      <router-link :to="{name: 'AddBlog'}">创建博客</router-link>
      |
      <router-link :to="{name: 'EditBlog'}">修改博客</router-link>
    </div>
    <!-- 原来代码 -->
    <-- <router-view/> -->
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>
 
<style>
<!-- 省略 -->
</style>