我想在Vue.js应用程序中为不同的路由使用相同的组件。
我目前有这样的事情:
main.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
})
myComponent.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>
当我在浏览器中手动输入路线时,一切运行良好,但当我尝试使用其中一些路由器生成的链接在路线之间导航时,没有任何反应。路线改变但内容仍然相同。知道如何解决这个问题吗?
谢谢!
答案 0 :(得分:16)
这是预期的行为,因为Vue正在尝试优化并重用现有组件。您希望实现的行为过去通过名为canReuse
的设置来解决,但已被弃用。目前推荐的解决方案是在:key
上设置一个唯一的<router-view>
属性,如下所示:
<router-view :key="$route.path"></router-view>
查看此JSFiddle example。
答案 1 :(得分:1)
只是为了记笔记。如果有人使用SSR模板,事情会有所不同。 @ mzgajner的回答确实重新创建了组件,但不会再次触发asyncData。
为此,请修改这样的entry-client.js。
OLD:
const activated = matched.filter((c, i) => {
/*
In my case I only needed this for 1 component
*/
diffed = ((prevMatched[i] !== c) || c.name == 'p-page-property-map')
return diffed
})
NEW:
^\p{L}{2,}$
答案 2 :(得分:0)
您可以使用An error occurred when verifying security for the message.
属性,这样您的组件就不会浪费时间重新加载:
index.js 您可能会遇到这样的事情
watch
user.vue
const routes = [
{
path: '/users/:id',
component: Vue.component('user', require('./comp/user.vue').default)
}
]