vue命名式路由#render函数#es6箭头函数的柯里化

先直接上代码实现router中的一种思路：命名式路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
const getComponent = name => () => import('../components/'+name+'.js');
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect:'/test',
    children:[
      {
        path:'test',
        name:'test',
        components:{
          default:getComponent('body'),
          header:getComponent('header'),
          footer:getComponent('footer'),
        }
      }
    ]
  },
]

//下面是父路由下面的内容，会根据name属性找到对应的路由文件，name属性为空则默认是default路由
 <router-view name="header"></router-view>
 <router-view></router-view>
 <router-view name="footer"></router-view>

再说下

const getComponent = name => () => import('../components/'+name+'.js');

这是个动态引路由的函数，其中是两个箭头函数，函数第一次执行后就能得到路由文件：getComponent('body') -----> () => import('../components/body.js');,es6的箭头函数还能快速实现函数的柯里化，就不说了，自行研究。
.
.
.
.

附上个body.js里面的内容，一般是body.vue我这边用的是render函数，

import test from "@/components/test";
export default {
    name:'body1',
    data(){
        return{
            title:'内容',
        }
    },
    components:{test},
    render (h){
        let {title} = this;
        return (
            <div>
                <div>{title}</div>
                <div>22</div>
                <test></test>
            </div>
        )
    }
}

简单两句说下render的使用方法吧
render中，如果不用h（createElement），就直接return后面写节点元素内容啥的就行，如果用了h，则return中要按照其格式严格执行
用了h()

render (h){
    let {title} = this;
    return h('div',{
            domProps:{
                innerHTML:'内容'
            }
        }
    )
}

不用h(),你render中传了h参数也没事，return没调用即可

render (h){
    let {title} = this;
    return (
        <div>
            <div>{title}</div>
            <div>22</div>
        </div>
    )
}

createElement：h 主要是创建虚拟节点，render是将虚拟节点进一步处理挂载，
(h是vue里面默认的一种createElement简写方式)，
如果用了createElement…我这里再附上第二个参数的一些属性吧，第三个参数就是传递子节点元素：标签内部的html

createElement第二个参数

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

//  class style的不同写法
{
    class:["class1",{"class2":true}]，
    style: {background: red}
}

createElement第三个参数

传递一个数组哈：

[
	'xx',
	createElement('h1','内容'),
	createElement('h2','内容2'),
]