vue-router-rerendering

by plpot

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/default" v-test>Default</router-link>
  <router-link to="/refresh" @click.native="updateKey()">Refresh</router-link>

  <router-view :key='routeKey'></router-view>
</div>

<template id="default">
  <div>
    <div>Rendering Time : {{now}}</div>
    <div>
    메뉴 진입 후 동일 메뉴 재클릭시 화면이 다시 렌더링 되지 않음.
    </div>
  </div>
</template>

<template id="refresh">
  <div>
    <div>Rendering Time : {{now}}</div>
    <div>
    메뉴 진입 후 동일 메뉴 재클릭시 화면이 다시 렌더링 됨.
    </div>
  </div>
</template>

JavaScript

Vue.directive('test', {
  bind: function(el, binding, vnode) {
  	console.log('bind')
  	console.log(el, binding, vnode)
    console.log(el.onclick)
  	el.onclick = function(){
    	console.log(vnode.componentInstance.$root.routeKey)
      vnode.componentInstance.$root.routeKey = new Date().getTime()
    	console.log('click!')
    }
  },
  inserted: function(el, binding, vnode) {
  	console.log('inserted')
  
    //console.log(vnode.componentInstance.$router)
    //console.log(vnode.componentInstance.$route)
    //console.log('fullPath', vnode.componentInstance.$route.fullPath)
    //Vue.set(vnode.componentInstance.$router.history.current.query, 'ts', new Date().getTime())
    //Vue.set(vnode.componentInstance.$router.history, 'ready', false)
    //vnode.componentInstance.$route['fullPath'] = 'ddd'
    //Vue.set(vnode.componentInstance.$route, 'fullPath', 'ddd')
    //console.log('fullPath', vnode.componentInstance.$route.fullPath)
  },
  update: function(el, binding, vnode) {
  	console.log('update')
    //Vue.set(vnode.componentInstance.$router.history.current.query, 'ts', new Date().getTime())
  },
  componentUpdated: function(el, binding, vnode) {
  	console.log('componentUpdated')
  },
  unbind: function(el, binding, vnode) {
  	console.log('unbind')
  }
})

const Default = {
  template: '#default',
  data: function() {
    return {
      now: Date.now()
    }
  },
  beforeRouteEnter(to, from, next) {
    alert('beforeRouteEnter')
    next()
  }
}

const Refresh = {
  template: '#refresh',
  data: function() {
    return {
      now: Date.now()
    }
  },
  beforeRouteEnter(to, from, next) {
    alert('beforeRouteEnter')
    next()
  }
}

const router = new VueRouter({
  routes: [{
      path: '/default',
      component: Default,
      beforeEnter: (to, from, next) => {
        alert('beforeEnter')
        next()
      }
    },
    {
      path: '/refresh',
      component: Refresh,
      beforeEnter: (to, from, next) => {
        alert('beforeEnter')
     ...