vue细节

• v-if & v-show

v-if

脱离文档流
在使用v-if的节点上使用ref来获取节点会得到 undefind(无论v-if的值时true或者false)

<div v-if='true' ref='test'>测试div</div>
console.log(this.$refs.test)  // undefind

v-show

不脱离文档流，false时节点显示为display:none,使用ref无影响

• this.route

this.$router

全局路由,可用于路由的跳转 go,push等方法
注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面

this.$route

表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法；

获取dom节点

不需要再去使用jquery
使用

this.$refs[ref].attributes //获取属性
this.$refs[ref].className //获取class

  <li class="roleLi" v-show="powerLeftRole" ref="roleRouter">

                <router-link to="/powerSetting/role">
                    <roleIcon class="power-icon"></roleIcon>
                    角色管理
                </router-link>
   </li>

 console.log(this.$refs.roleRouter) //打印会显示整个dom节点

打印结果图

image.png

注意直接在router-link上使用ref会得到一个VueComponent 对象而不会得到相应的dom节点
如何得到 router-link节点,用上述的例子演示，router-link时li元素的第一个节点

  <li class="roleLi" v-show="powerLeftRole" ref="roleRouter">

                <router-link to="/powerSetting/role">
                    <roleIcon class="power-icon"></roleIcon>
                    角色管理
                </router-link>
   </li>
console.log(this.$refs.roleRouter.children[0]) 

打印结果图

image.png