vue路由配置和react路由配置的区别

react生态和vue生态都支持单文件应用SPA。在项目开发中，两个框架都有自己独特的路由机制。今天，我们就简单的用代码+注释的方式来展开一下两者的区别。Vue项目中的路由配置router/indexvue路由配置是通过vue-router模块完成路由和组件的渲染，一般分为五步//使用模块化编程导入模块依赖于importVuefrom'vue';//从'vue-router'引入vueimportVueRouter;//引入vue路由//1.定义路由组件importGuidefrom'../views/Guide.vue'；从“@/components/Vipcinema”导入Vipcinema；Vue.use(VueRouter);//引入路由挂载在vue实例上//2.路由和组件映射constroutes=[//根路径{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"}}]},//登录页面route{path:"/login",name:"login",component:()=>import("@/views/Login.vue"),},//搜索页面路由{path:"/search",name:"search",component:()=>import("@/views/Search.vue")},//redirect{path:'*',redirect:{name:'guide'}}]//3.定义路由对象constrouter=newVueRouter({routes})//4.暴露配置routesexportdefaultroutersrc目录项目主文件main.jsmain.js完成路由全局注册importrouterfrom'./router'//routingnewVue({//listenRoutingpointstowatch:{'$route':function（吨o,from){//全局路由守卫console.log(to);控制台日志（来自）；}},router,//全局注册路由后，可以直接在路由视图页面this.$router上操作路由render:h=>h(App)}).$mount('#app')//挂载到实例vue路由配置第五步，完成路由出口配置，根据路由匹配的组件在组件视图的view目录下渲染Main.vueMain.vueReact项目路由配置react路由是基于react-router-dom依赖进行路由配置的，后面会在代码注释中详细介绍几个重要组件。react路由配置比较灵活。路由配置和渲染可以写在一个文件中。view/index.js//配置所有路由importReact,{Component}from"react";import{HashRouterasHash,//我这里使用的是hash路由，也就是前端路由Redirect,//路由重定向Route,//定义路由选项，`负责接收对应的路由组件view，作为Switch的路由槽//Onlyonly会渲染一条路径，解决路由的唯一渲染（onlyrenderaroutepath）}from"react-router-dom”；从“&/lazyload”导入LazyLoad；//react路由懒加载需要依赖第三方模块`react-loadable`,LazyLoad是之前封装好的懒加载效果//以后再写，附上具体代码exportdefaultclassMainLayoutextendsComponent{render(){return(//exact表示条件是完全匹配，只有location完全匹配才会应用activeclass/style()}/>import("./guide"))}>//{LazyLoad(()=>import("./guide"))}其用法与vue路由的懒加载原理相同，只是react需要依赖第三方模块import("./login"))}>import("./search"))}/>{/*评论页评论*/}import("./comment"))}>{/*我的评估中心*/}import("./evaluate"))}>{/*填写addeval*/}导入("./addeval"))}>{/*聊天室*/}import("./chat"))}>{/*不存在*/}()}>