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
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 (
//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.HashRouter是使用URL的哈希部分（即window.location.hash）的<路由器>可以保持视图(ui)与路URL同步,但兼容性较低,不需要服务端配置,也叫做前端路由.BrowserRouter是使用HTML5历史记录API（pushState，replaceState和popstate事件）的localhost:1234/my-reactt/dist/index.html#/index/home