Vuejs2 vue路由器导航到同一路线并重新运行已安装的挂钩

如何使用路由器链接导航到当前路由并重新运行挂载的钩子

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router"></script>

<!-- App -->
<div id="app">
  <nav>
    <router-link :to="{ name: 'home' }" exact>Home</router-link>
       <router-link :to="{ name: 'about' }" @click.native.prevent="router.push({ name: 'about' })">About</router-link>
  </nav>

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

家
关于

JS

console.clear()
console.log('Yes! We are using Vue version', Vue.version)

Vue.use(VueRouter)

const Home = {
    template: `<h1>Home</h1>`,
}

const About = {
    template: `<h1>{{new Date()}}</h1>`,
  mounted(){
    console.log('mounted')
  }
}
const routes = [
    { path: '/', name: 'home', component: Home },
  { path: '/about', name: 'about', component: About },
]
const router = new VueRouter({
    routes,
})
// New VueJS instance
var app = new Vue({
    // CSS selector of the root DOM element
  el: '#app',
  // Inject the router into the app
  router,
})

console.clear（）
console.log（'是！我们使用的是Vue版本'，Vue.version）
Vue.use（VueRouter）
康斯特之家={
模板：`Home`，
}
常数约={
模板：{{new Date（）}}`，
安装的（）{
console.log（'mounted'）
}
}
常数路由=[
{路径：'/'，名称：'home'，组件：home}，
{路径：'/about'，名称：'about'，组件：about}，
]
常量路由器=新的VueRouter({
路线，
})
//新的VueJS实例
var app=新的Vue({
//根DOM元素的CSS选择器
el:“#应用程序”，
//将路由器注入应用程序
路由器，
})

---

在上面的示例中，如果导航到“About”，它将显示新日期的时间戳，并记录“mounted”。但是，如果我已经打开了/about，那么单击about链接什么也做不了。我想在单击“关于”时重新运行整个组件生命周期，即使我已经点击了它。

每当用户单击“关于”页面时，您需要更改

元素中的键，这将强制安装挂钩：

<template>
  <div id="app">
    <router-link @click.native="updateViewKey" :to="{ name: 'about' }">About</router-link>

    <router-view :key="viewKey"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      viewKey: 1
    };
  },
  methods: {
    updateViewKey() {
      this.viewKey+=1;
    }
  }
};
</script>

关于
导出默认值{
名称：“应用程序”，
数据（）{
返回{
查看键：1
};
},
方法：{
updateViewKey（）{
这个.viewKey+=1；
}
}
};

谢谢，这很有效。不幸的是，我无法支持你的回答我认为你至少可以接受它作为解决方案：）@EderChrono此解决方案工作正常，但得到导航重复的警告。你知道如何摆脱那个警告吗