vue-router 导航到相同的路由并重新运行挂载的钩子

Question

如何使用 router-link 导航到当前路由并重新运行挂载的钩子？

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,
})

在上面的示例中，如果我导航到“关于”，它会显示新日期的时间戳并记录“已安装”。但是，如果我已经在 /about 上，单击 about 链接不会执行任何操作。我想在单击“关于”时重新运行整个组件生命周期，即使我已经点击它。

Answer 1

每当用户点击您的 about 页面时，您都需要更改 <router-view> 元素中的键，这将强制挂载钩子：

<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>