vue小细节(2)

render: h => h(App)理解：

//ES5：
render: function (createElement) {
    return createElement(App);
}
//ES6:
render (createElement) {
    return createElement(App);
}

//再进一步缩写为：

 
render (h){
    return h(App);
}
//再按照箭头函数的写法就变成：
render: h => h(App);

createElement 函数是用来生成 HTML DOM 元素的（VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数（挂载函数)，渲染成真实 DOM 节点，并挂载到根节点上。）
也就是上文中的 generate HTML structures，也就是 Hyperscript，这样作者才把 createElement 简写成 h。
因为 HTML 是 hyper-text markup language 的缩写（超文本标记语言）

VueRouter:

router.beforeEach((to, from, next) => {
    if(author!="admin"){
        next('/login');
    }else{
          //放行
            next();
    }
})

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

html中：

<div> 

<router-link to="/foo">Go to Foorouter-link>
    <router-link to="/bar">Go to Barrouter-link>
  p>
  
  
  <router-view>router-view>
div>

<script>
const Foo = { template: '
foo' }
const Bar = { template: '
bar' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
    routes: routes    (可缩写为:routes)
) }) 



 const app = new Vue({ router }).$mount('#app') 

   

script>

路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

vue里面提供了三大类钩子，两种函数
1、全局钩子

router.beforeEach((to, from, next) => {}

• to:router即将进入的路由对象
• from:当前导航即将离开的路由
• next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

2、某个路由的钩子

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

 

3、组件内钩子

.......

说明：钩子函数的用法：它是和data,methods平级的。

 

2.1   Vue Bus总线：

   

const Bus = new Vue()

 

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

 将Bus注入到Vue根对象中，

import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }　　

})

示例代码如下：

运行如下：

                                                

 

转载于:https://www.cnblogs.com/goodshred/p/9812598.html