單擊路由器鏈接時強制重新渲染 vue 組件

Question

我在嘗試讓組件在導航單擊時在同一組件上重新渲染時遇到問題。 例如，我在 /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;

導航.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>

導航鏈接.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>

Answer 1

在 nav.vue 中添加：key

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