vueルーティング構成とreactルーティング構成の違い

reactエコとvueエコはいずれも単一ファイル応用SPAをサポートし、プロジェクト開発における二つの大きな枠組みにはそれぞれ独特のルーティングメカニズムがあり、今日はコード+注釈の方式を通じて、両者の異なるところを展開する.
Vueプロジェクト内のルーティング構成
router/index
vueルーティング構成はvue-routerモジュールによってルーティングとコンポーネントのレンダリングを完了し、一般的に5つのステップに分けられる.

//               
import Vue from 'vue';   //  vue
import VueRouter from 'vue-router';  //  vue  
//1.      
import Guide from '../views/Guide.vue';
import Vipcinema from '@/components/Vipcinema';

Vue.use(VueRouter); //      vue   

//2.         
const routes = [
  //   
  {
    path: '/',
    redirect: { 
      name: 'guide'
    },
  },
  //     
  {
    path: '/guide',
    name: 'guide',
    component: Guide,
  },
  //       
  {
    path: "/main",
    name: "main",
    component: () => import("@/views/Main.vue"),  //            ,                   .

    //       ,   children  
    children: [
      //                 
      {
        path: "",
        redirect: {
          name: "movie"
        }
      },

      //      
      {
        path: "movie",
        name: "movie",
        component: () => import("@/views/Movie.vue")
      },

      //       
      {
        path: "cinema",
        name: "cinema",
        component: () => import("@/views/Cinema.vue")
      },
      //        
      {
        path: "mine",
        name: "mine",
        component: () => import("@/views/Mine.vue")
      },
      //     
      {
        path: "shopcar",
        name: "shopcar",
        component: () => import("@/views/Shopcar.vue")
      },
     
      //        
      {
        path: "*",
        redirect: { name: "movie" }
      }
    ]
  },

  //      
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/Login.vue"),

  },
  //     
  {
    path: "/search",
    name: "search",
    component: () => import("@/views/Search.vue")
  },
  //   
  {
    path: '*',
    redirect: {
      name: 'guide'
    }
  }
]
//3.      
const router = new VueRouter({
  routes
})
//4.      
export default router

srcディレクトリの下のプロジェクトのメインファイルmain.js
main.jsルーティンググローバル登録完了

import router from './router'  //  
new Vue({
  //       
  watch:{
    '$route':function (to,from) {  //      
       console.log(to);
      console.log(from);
    }
  },
  router,   //                 this.$router    
  render: h => h(App)
}).$mount('#app')  //     

vueルーティング構成第5歩、ルーティング出口構成を完了し、ルーティングが一致するコンポーネントに基づいてコンポーネントビューをレンダリングする
viewディレクトリの下でMain.vue
Main.vue

Reactプロジェクトルーティング構成
reactルーティングはreact-router-dom依存に基づいてルーティング構成され、コード注釈でいくつかの重要な構成部分を詳細に説明します.
reactルーティング構成は、ルーティング構成とレンダリングを1つのファイルに書き込むことが比較的柔軟である.view/index.js

//       
import React, { Component } from "react";

import {
    HashRouter as Hash, //     hash         
    Redirect,   //     
    Route,  //      ,`             ,        
    Switch  //          ,  route     （          ）
} from "react-router-dom";

import LazyLoad from "&/lazyload"; //react               `react-loadable`, LazyLoad            
//          

export default class MainLayout extends Component {
    render() {
        return (
            

                
    //exact        ,                /  
                     ()} />
                    import("./guide"))}>  //{LazyLoad(()=>import("./guide"))}     vue         ,  react         
                    import("./login"))}>
                    import("./search"))} />
                    {/*       comment*/}
                    import("./comment"))}>
                    {/*        */}
                    import("./evaluate"))}>
                    {/*       addeval*/}  
                    import("./addeval"))}>
                    {/*     */}
                    import("./chat"))}>
                    {/*     */}
                     ()}>
                
            
        )
    }
}

reactルーティング怠け者構成
util/lazyload.js

import React from "react";
import Loadable from "react-loadable"; //npm i  react-loadable      

//  import {Toast} from "antd-mobile";  //ui       
//      
const loadingComponent = () => {
    //ui    
    //  Toast.loading('Loading...', 1, () => {
    //     console.log('Load complete !!!');
    // });
    return (
        

            loading......
        
    )
}
export default (loader, loading = loadingComponent) => {
    return Loadable({
        loader,   //        
        loading  //      
    })        
}

reactプロジェクトメインエントリファイルマウントルーティングとコンポーネントビュー
src/index.js

import React, { Component } from "react";
import {
    HashRouter as Hash,
    Route,
} from "react-router-dom";

import MainLayout from "./views";  //         
export class MainRouter extends Component {
    render() {
        return (
            
                
            
        )
    }
}

reactルーティングモードの知識の補充
reactルーティングには、HashRouterとBrowserRouterの2つの構成モードがある.HashRouterは、URLのハッシュ部分(window.location.hash)を使用するビュー(ui)を路URLと同期させることができるが、互換性が低く、サービス側の構成を必要とせず、フロントエンドルーティングとも呼ばれる.BrowserRouterはHTML 5履歴API(pushState,replaceState,popstateイベント)を使用してUIとURLの同期を維持し、オンライン時にサービス側がbasename共通パスを構成する必要があるlocalhost:1234/my-reactt/dist/index.html#/index/homeに類似している.