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