将组件加载到html容器中
三大框架都是spa，在html文件中写出 root的<div>对象（通常叫做app或者root），然后将根组件渲染给root对象

比如html内容：通过npm脚手架生成的项目，html的文件名字应该如下

• Angular:src/index.html
• Vue:index.html
• React: public/index.html

  <div id="root"></div> <!-- 容器元素 -->

Angular

在Angular中，通过模块文件注册组件，根模块文件通常是app.module.ts，你也可以自定义自己的模块文件xxx.module.ts。
在模块文件中导入组件或其他模块，然后在@NgModule装饰器的declarations数组中注册组件，在import数组中注册其他模块：

将组件和路由注册到模块中：app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './/app-routing.module';
import { YourComponentNameComponent } from './your-component-name/your-component-name.component';
 
@NgModule({
  declarations: [
    AppComponent,
    YourComponentNameComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

加载根模块：main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

根据路由显示当前路径对应文件:src\app\app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeCustomComponent, canActivate: [AwagAuthVerifyToken] },
];

入口文件是在angular.json文件中指定的，这里不再继续讨论，实际开发中通常也是无需关注的。

2.Vue:

加载根组件和路由src/main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';

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

根据路由显示当前路径对应文件:src\app\app-routing.module.ts

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export const constantRoutes = [
  {
    path: '',
    redirect: '/EnglishChinese',
  },
  {
    path: '/EnglishChinese',
    name: 'EnglishChinese',
    // component: Menu
    component: () => import('@/views/english_chinese/Main'),
    children: [
      {
        path: 'WordList',
        name: 'WordList',
        components: {
          default: () => import('../views/english_chinese/words/WordList'),
        },
      },
      {
        path: 'CountChart',
        name: 'CountChart',
        components: {
          default: () => import('../views/english_chinese/count/CountChart'),
        },
      },
    ],
  },
];
const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  mode: 'history',
});
const router = createRouter();

export default router;

3.React:src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '.App';
import reportWebVistals from './reportWebVitals';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);