vue 源码解读

前端基本 0基础，尝试从代码入手，不会的直接搜索就行了。

 成功添加页面（test33）

1.在.../src/config/menu.js 源码24行增加 

  { title: 'Test33', name: 'Test33', icon: '' },

2.在.../src/routers/ruleRouters.js 源码第9行增加

{ path: '/test/test2/test33', name: 'Test33',component: () => import('../views/Test/Test33') },

 3.在.../src/views/Test 中添加文件 “Test33.vue ”

    文件内容如下：

<template>
  <a-layout class='index animated fadeIn'>
    test333
  </a-layout>
</template>
<script>
export default {
  name: 'Test33',
}
</script>

对上述源码原理进行理解；

1.menu.js

const menu = [
    {
        name: 'Index',
        title: '首页',
        icon: 'HomeOutlined',
    },
    {
        title: 'Test',
        name: 'Test',
        icon: 'BarsOutlined',
        subs: [
            {
                title: 'Test1',
                name: 'Test1',
                icon: '',
            },
            {
                title: 'Test2',
                name: 'Test2',
                icon: '',
                subs: [
                    { title: 'Test21', name: 'Test21', icon: '' },
                    { title: 'Test22', name: 'Test22', icon: '' },
                    { title: 'Test33', name: 'Test33', icon: '' },
                ]
            }
        ]
    },
    {
        title: 'Demo',
        name: 'Demo1',
        icon: 'BarsOutlined',
        subs: [
            {
                title: 'Demo',
                name: 'Demo',
                icon: '',
                subs: [
                    {
                        title: 'Detail',
                        name: 'Detail',
                        hidden: true
                    }
                ]
            }
        ]
    }
]

module.exports = menu

• 定义了常量（const） menu，并在最后通过module.exports 提供了对外的接口
• meun 内是左侧标题栏 同时icon是一个图标

2.ruleRouters.js

const Index = () => import(/* webpackChunkName: 'login' */'../views/Index.vue');

const routes = [
  { path: '/index', name: 'Index',component: Index },
  { path: '/test/test1', name: 'Test1',component: () => import('../views/Test/Test1') },
  { path: '/test/test2/test21', name: 'Test21',component: () => import('../views/Test/Test21') },
  { path: '/test/test2/test22', name: 'Test22',component: () => import('../views/Test/Test22') },
  { path: '/test/test2/test33', name: 'Test33',component: () => import('../views/Test/Test33') },

  { path: '/demo/demo', name: 'Demo',component: () => import('../views/Test/Demo') },
  { path: '/demo/demo/detail', name: 'Detail',component: () => import('../views/Test/Detail') },
]
export default routes

• 路由其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 

3.Test33.vue

<template>
  <a-layout class='index animated fadeIn'>
    test333
  </a-layout>
</template>
<script>
export default {
  name: 'Test33',
}
</script>

• 配套之前的输出内容