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;

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>

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>

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

1 个答案: