单击路由器链接时强制重新渲染 vue 组件答案

【问题标题】：Force re-render of vue component on click of router link单击路由器链接时强制重新渲染 vue 组件
【发布时间】：2020-02-05 03:51:30
【问题描述】：

我在尝试让组件在导航单击时在同一组件上重新呈现时遇到问题。例如，我在 /one -- 单击 /one 的导航链接不会重新渲染我希望它执行的组件。关于如何实现这一目标有什么好的想法吗？

路由器：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
import One from '../pages/One.vue'
import Two from '../pages/Two.vue'

const router = new Router({
   mode: 'history',
   routes: [
    { path: '/one', component: One, name: 'One', meta: {title: 'One'} },
    { path: '/two', component: Two, name: 'Two', meta: {title: 'Two'} },
    ]
});
export default router;

nav.vue:

<template>
  <div>
    <ul>
      <li v-for="item in nav">
        <nav-link class="nav-root-link" v-else :link="item"></nav-link>
      </li>
    </ul>
  </div>

</template>

<script>

  import navLink from './navLink.vue'
  export default {
    components: { navLink },
    data () {
      return {
        groupVisible: [],
        nav: [
          { name: 'One', to: {name: 'One'}},
          { name: 'Two', to: {name: 'Two'}},
        ]
      }
    },
  }
</script>

navLink.vue:

<template>
  <router-link class="nav-link" :to="link.to">
    <span class="nav-link-name">{{ link.name }}</span>
  </router-link>
</template>

<script>
  export default {
    props: {
      link: {
        required: true,
        type: Object
      }
    },
  }
</script>

【问题讨论】：

尝试将 :key 添加到您的组件中。一旦 :key 发生变化，组件就会重新渲染。
@RenatoManalili 您的意思是在
、navLink 组件或 nav 链接到的实际组件上添加一个键？