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

Posted 2020-10-01 于啊

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

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

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

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