vue路由配置和react路由配置區別

react生態和vue生態都支持單文件應用SPA,項目開發中兩大框架都有其各自獨特的路由機制,今天簡單經過代碼+註釋的方式,展開二者不同的地方.

Vue項目裏面路由配置

router/index

vue路由配置是經過vue-router模塊來完成路由與組件的渲染,通常分五個步驟

//使用模塊化編程方式導入模塊依賴
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路由配置第五步,完成路由出口配置,根據路由匹配的組件,渲染組件視圖

view目錄下Main.vue

Main.vue

<template>
    <div>
        <router-view/>  //加載路由視圖
    </div>
</template>

React項目路由配置

react路由是基於react-router-dom依賴進行路由配置,待會在代碼註釋中詳細介紹其中幾個重要組成部分

react路由配置相對靈活能夠將路由配置和渲染寫在一個文件裏面.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 (
            <div className="main">
                <Switch>
    //exact表示條件精準匹配,僅當位置匹配徹底時纔會應用活動類/樣式
                    <Route path="/" exact render={() => (<Redirect to="/guide" />)} />
                    <Route path="/guide" component={LazyLoad(()=>import("./guide"))}></Route>  //{LazyLoad(()=>import("./guide"))} 其用法和vue路由懶加載原理同樣,只是react須要依賴第三方模塊
                    <Route path="/login" component={LazyLoad(()=>import("./login"))}></Route>
                    <Route path="/search" component={LazyLoad(()=>import("./search"))} />
                    {/* 評論頁面  comment*/}
                    <Route path="/comment/:goodsId"  component={LazyLoad(()=>import("./comment"))}></Route>
                    {/* 個人評價中心 */}
                    <Route path="/evaluate"  component={LazyLoad(()=>import("./evaluate"))}></Route>
                    {/* 填寫追評  addeval*/}  
                    <Route path="/addeval"  component={LazyLoad(()=>import("./addeval"))}></Route>
                    {/* 聊天室 */}
                    <Route path="/chat"  component={LazyLoad(()=>import("./chat"))}></Route>
                    {/* 不存在 */}
                    <Route render={() => (<Redirect to="/guide" />)}></Route>
                </Switch>
            </div>
        )
    }
}

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 (
        <div>
            loading......
        </div>
    )
}
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 (
            <Hash basename="">
                <Route component={MainLayout}></Route>
            </Hash>
        )
    }
}

react路由模式知識補充

react路由有兩種配置模式,HashRouter和BrowserRouter.HashRouter是使用URL的哈希部分（即window.location.hash）的<路由器>能夠保持視圖(ui)與路URL同步,但兼容性較低,不須要服務端配置,也叫作前端路由.BrowserRouter是使用HTML5歷史記錄API（pushState，replaceState和popstate事件）的<Router>來保持UI與URL的同步,須要上線時服務端配置basename公共路徑,相似於localhost:1234/my-reactt/dist/index.html#/index/home