Vue项目中，在不同路由下，组件样式需要改变的解决方案，动态监听路由变化。

        在项目中遇到一个问题࿰c;当进入不同的路由时࿰c;根组件的导航栏样式需要改变。

        在主界面时࿰c;导航栏样式应为：

        在其他界面时࿰c;导航栏样式应为：

        最初解决方案：

        一开始想到的解决方案是࿰c;当其他界面的组件创建时࿰c;向根组件传递数据࿰c;改变导航栏样式(导航栏写在了根组件中) 。

        弊端：①实现起来比较困难；②需要给许多组件配置这个方案࿰c;很麻烦

        最终解决方案：

        在需要修改的组件中࿰c;通过v-bind指令动态绑定导航栏属性

        初始化样式࿰c;且通过this.$route.fullPath来获取当前的地址。

        当地址发生变化时࿰c;修改导航栏样式。

         此时遇到问题：

        发现 path(this.$route.fullPath) 只能获取到第一次进入网页时的路径࿰c;当进入不同路由时࿰c;path的值不会改变。比如先进入首页࿰c;path的值为'/Home'࿰c;然后进入文章页࿰c;本来期望path的值变为'/Article',从而重新渲染导航栏࿰c;但是此时发现path的值不会改变࿰c;导致导航栏不会被重新渲染。

        解决办法

        通过watch监听路由对象࿰c;当路由对象发生变化时࿰c;重新给path赋值࿰c;并调用要使用的方法。

        ​​​​​​ 

        问题解决！！！

        总结：

        当路由发生变化࿰c;需要重新渲染组件时࿰c;可以用一个变量获取当前路径。再使用watch来监听路由变化࿰c;当发生变化时࿰c;重新给该变量赋值࿰c;同时调用需要的方法即可。