首页 > 代码库 > vue路由的watch对象以及v-once的问题

vue路由的watch对象以及v-once的问题

   实现的需求是在文章主页时,不显示后退的按钮。进入文章列表时显示后退按钮,我的设想是通过一个canShow的状态变量来进行控制,首先是使用路由。一开始在组件中调用router的导航钩子beforeRouteEnter,但是没有任何效果。这就很奇怪。接着思考我的路由。文章页面是/article/list。而进入详情页则是/article/detail/:id,继续往下看文档会发现。作者其实已经讲了这个问题,原文如下:

提醒一下,当使用路由参数时,例如从 /user/foo 导航到 user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

 原来如此,好吧。我们就用到作者提到的watch对象。这下果然就可以了。canShow能正常的在true和false之间切换了。但是问题又来了。。

为啥按钮还是不能正常的显示和隐藏。。。我去。然后再找我写的代码。发现多了一个v-once指令。好吧。之前为了缓存下来用了这个指令。看来用了这个指令之后页面加载完毕之后就不会再改变了。去掉v-once指令。ok。搞定。特此记录

vue路由的watch对象以及v-once的问题