我很难理解组件和路由如何协同工作。在文档中，他们只讨论一个级别的组件。如果有多个级别，它看起来不起作用。
我做了这个http://jsfiddle.net/uvqpracr/7/
当您点击init(1)时，它会使用 1 初始化计数器，当您点击init(5)时，它会使用 5 初始化计数器。在路径组件中，我声明v-bind:init-counter="$route.params.initCounter所以当我在counter-container时，写{{init-counter}}有效，但在子组件counter中，如果我写了v-bind:init-counter="initCounter"，则会发生事件它不起作用。
在this documentation中，我可以阅读：
使用带有参数的路线时要注意的一点是，当用户从
/user/foo导航到/user/bar时，将重复使用相同的组件实例。由于两个路由都呈现相同的组件，因此这比销毁旧实例然后创建新实例更有效。 但是，这也意味着不会调用组件的生命周期挂钩。
我想知道这是否是我尝试做的事情不起作用的原因。如果是这样，我真的很想知道我应该如何以简单的方式做到这一点。
答案 0 :(得分：1)
首先，是的，组件（counter-container及其子counter）只创建一次。
请参阅此demo JSFiddle的日志。无论您点击链接多少次，created()只会被调用一次（请参阅控制台）。
当您点击
init(1)时，它会使用 1 初始化计数器，当您点击init(5)时，它会以 5 <初始化计数器/ p>
不完全。我的意思是，点击次数并不总是初始化counter变量。
实际上，当您点击它们时，路线会发生变化，然后initCounter（不是counter，而不是total）会发生变化。
在第一次点击，由于之前尚未创建组件，因此initCounter的值将用于初始化counter（和{ {1}}）。
但在后续点击中，即使total 确实更改了嵌套组件，它也不会影响initCounter / counter个变量因为它们已经被创造出来了。
检查demo JSFiddle。我添加了total的显示，因此您也会在counter: {{ counter }} / initCounter: {{ initCounter }}组件中看到initCounter更改。
因此，您现在知道counter仅用于设置initCounter / counter一次，仅在首次创建组件时使用。{/ p>
如果您想在total更改时更新它们，解决方案是观看路线（使用initCounter），或者更具体地说，观看watch: { '$route' (to, from) { /* react here */ } }。
检查this other demo JSFiddle。每当initCounter更新时，此一次使用watch并更新counter / total。