vue.js - Vue关于使用vue-router控制视图渲染的问题。

问题描述

问 题

环境：Vue2.0 + vue-router + element-ui + 新手,
思路：想通过正则判断vue-router的$route.path来控制SideBar组件的渲染与否，具体代码如下：

App.vue

<template>
  <div id="app">
    <div class="warper">
      <div class="header">
        <TopBar></TopBar>
      </div>
      <el-row><el-col :span="2" >
          <div class="grid-content bg-purple-dark">
            <SideBar v-if="showSide"></SideBar>  <!-- SideBar -->
          </div>
        </el-col>
        <el-col :span="22">
          <div class="grid-content bg-purple">
            <div class="main-cntr">
              <router-view></router-view>
            </div>
          </div>
        </el-col></el-row>
    </div>
  </div>
</template>

  export default {
    name: 'app',
    data () {
      return {
        showSide: true
      }
    },
    components: {
      TopBar,
      SideBar
    },
    methods: {

    },
    beforeCreate(){
      console.log(this.$route.path);  //  "/stores"
      console.log(/^\/stores/.test(this.$route.path)); // true

      if (/^\/stores/.test(this.$route.path)) { this.showSide = false }

      console.log(this.showSide); // false
    }
  }

问题1：在组件中是否可以使用beforeCreate来创建钩子？文档都是在Vue实例中使用，但我在组件中使用也没有报错。
问题2：在beforeCreate中this.showSide = true, 但渲染出来的视图SideBar还是没有隐藏？可是console出来的结果显示已经设置this.showSide为false了

问题3：有更好的思路吗？

先谢过...

解决方案

问题一、问题二：楼主想使用Vue实例的beforeCreate钩子函数，是可以的，但是此处用错了。因为beforeCreate钩子函数发生在Observe Data之前，也就是说此时通过this.showSide是取不到任何值的，此时this.showSide是undefined。但是楼主也赋值了，此时的赋的值并不是赋给了响应式字段showSide，而是赋给了vue实例this下重新创建的一个showSide字段。当Vue实例被mounted以后，此时的响应式字段showSide是最初状态，并没有被赋值。这也就解释了为什么楼主在赋值后并且打印都显示正常赋值的情况下，视图并没有响应式更新的问题。

问题三：楼主可以通过在watch中监听‘$route’的变化，此时判断$route.path的值是否满足条件，进行相应的showSide的赋值

这篇关于vue.js - Vue关于使用vue-router控制视图渲染的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！