javascript - (Vue.js) 相同组件不同路由

Question

我想在 Vue.js 应用程序中为不同的路由使用相同的组件。

我目前有这样的东西:

---

ma​​in.js

const routes = [
    { path: '/route-1', name: 'route-1', component: MyComponent },
    { path: '/route-2', name: 'route-2', component: MyComponent },
    { path: '/route-3', name: 'route-3', component: MyComponent },

]

const router = new VueRouter({
    routes
})

---

我的组件.vue

<ul>
    <li><router-link to="/route-1">Route 1</router-link></li>
    <li><router-link to="/route-2">Route 2</router-link></li>
    <li><router-link to="/route-3">Route 3</router-link></li>
</ul>

---

当我在浏览器中手动输入路线时，一切正常，但当我尝试使用其中一些路由器生成的链接在路线之间导航时，没有任何反应。路线变了，内容还是一样。知道如何解决这个问题吗？

谢谢!

Answer 1

这是预期的行为，因为 Vue 正在尝试优化并重用现有组件。您想要实现的行为过去是通过名为 canReuse 的设置来解决的，但这已被弃用。目前推荐的方案是设置唯一:key您的属性(property)<router-view>像这样:

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

看看这个 JSFiddle example .