vue中导航栏组件从有右滑条的页面切换到没有有滑条的页面长度发生了变化怎么办

在 Vue 中，可以使用 v-bind 指令绑定样式，动态更新组件的长度。可以在组件的 computed 属性中计算出要绑定的样式，并在组件的 template 中使用 v-bind 指令绑定样式。同时，也可以使用 watch 监听组件的数据变化，并在数据变化时更新样式。

例如:

computed: {
    navbarStyle() {
        return {
            'max-height': this.showRightBar ? '50px' : '0px'
        }
    }
},
template: `
    <div v-bind:style="navbarStyle">
        <!-- navbar content -->
    </div>
`,
watch: {
    showRightBar(newVal) {
        if (!newVal) {
            this.navbarStyle['max-height'] = '0px'
        } else {
            this.navbarStyle['max-height'] = '50px'
        }
    }
}

这样，在切换页面时，只需要更改 showRightBar 的值即可更新导航栏的长度。