Vue.js vue js组件没有';不要在同一页上重新阅读
我有一个组件Vue.js vue js组件没有';不要在同一页上重新阅读,vue.js,Vue.js,我有一个组件 <template>somecode</template> <script> export default { name: 'Card', created() { axios.get(apiObjUrl) somecode }) } </script> somecode 导出默认值{
<template>somecode</template>
<script>
export default {
name: 'Card',
created() {
axios.get(apiObjUrl)
somecode
})
}
</script>
somecode
导出默认值{
姓名:'卡片',
创建(){
axios.get(apiObjUrl)
一些代码
})
}
这是我的网址:
但我有一个问题:
当我像这样使用路由器链接时:
<router-link to="/card/155"> card 155</router-link>
<router-view :key="$route.fullPath"></router-view>
155卡
我的url更改:
但是created()
方法不会被触发。
所以我不向api发出新的xhr请求
而且数据不会改变
我该怎么办?这只是因为您的组件已经创建。您可以尝试使用生命周期挂钩
updated()
,而不是created()
注意:这仅在DOM更改时有效。如果你只想监听url的变化并相应地更新,你最好像这样$watch
你的路线
或者,您可以在
上设置如下属性:
<router-link to="/card/155"> card 155</router-link>
<router-view :key="$route.fullPath"></router-view>
因为
本身就是一个组件,唯一的键强制替换组件而不是重用它。因此,您可以使用生命周期挂钩
当我将
created
方法更改为updated
updated方法时,请参见当我第一次加载页面时更新的方法没有被触发(我不知道为什么),控制台中没有任何内容我没有真正得到它我需要在刷新页面时在创建的页面上调用相同的代码axios.get(apiObjUrl)
,在url更改时使用路由器链接
,那么我该怎么做呢?我已经编辑了我的代码,有一点错误。保持当前代码不变,并向其添加watch
属性。这可以接收您想要的任何属性并侦听更改。无论何时发生更改(在本例中,只要url发生更改),它都会在其执行块中触发任何表达式。此处有更多信息:@VamsiKrishna whta确切地:key
attr在这里做什么?@user2950593key
告诉Vue的虚拟DOM算法在将新节点列表与旧节点列表进行区分时识别VNode。简单地说,它告诉vue应该用新的节点替换节点(重新命名),因为每次路由更改时都会用新的路由路径传递新的密钥。效果非常好!谢谢你的解释!