一,vue2
1,路由用3.x的
2,实例化new VueRouter()
3,获取路由实例及路由信息:用this.$router.push()及this.$route.params
4,路由传参(参数都不丢失):
(1)动态路由: this.$route.params.id(路由表提前配置)
(2)query传参: this.$route.query.id
注:路径用path, react的路径用pathname,如this.$router.push({ path:"admin",params:{id:id}}
5,有路由元meta{},可以配置标题等; 子路由用children; components配置命名视图
二,vue3
1,路由用4.x的
2,实例化createRouter()
3,用useRouter()生成的路由对象实例,useRoute()生成路由信息对象(如router.push('/index/home'))
4,路由传参:同上
5,有路由元meta{},可以配置标题等,子路由用children; components配置命名视图
三,react的类组件
1,路由用v5的react-router-dom
2,路由配置
(1)一级路由写在APP里
(2)嵌套路由: 在子一级页面(如index)设置二级路由规则(有嵌套路由不写exact)
(3)路由组件:Switch, Route(path及component) , Redirect(from和to) , Link, NavLink(active 类)
及路由管理组件:BrowserRouter , HashRouter ,
注:Route组件本身就充当router-view的占位作用
3,路由实例及路由信息:
跳路由this.props.history
获取路由信息this.props.match.params(动态路由配置并传参)
获取路由信息this.props.location.state.id(用state传参)(query同理但是数据刷新丢失)
注: 路由及状态管理都被注入到props的属性中; 不是路由规则的可以用withRouter包裹获取路由方法;路径用pathname
4,自己动态配置路由
<Suspense fallback={<div className='loading' >加载中</div>}> <Switch > { this.props.routes.map((item, index) => { return ( item.from ? <Redirect key={index} exact from={item.from} to={item.to} /> : <Route key={index} path={item.path} render={(props) => { if (item.children) { return <item.component {...props} routes={item.children} /> } else { return <item.component {...props} /> } }} /> ) }) } </Switch> </Suspense>
引入自己写的路由表RouterView
一级路由 <RouterView routes={routes} /> 二级路由 <RouterView routes={this.props.routes} />
四,react的函数式组件
1,路由用v6的react-router-dom
2,路由配置
(1)所有嵌套路由规则写在APP里(没有exact),嵌套的二级路由在一级路由中用Outlet显示占位
(2)或定义类似于vue的路由规则,使用useRoutes()生成路由表,
(3)路由组件:Routes, Route(path及element套组件) , Navigate(被Route包裹及to) , Link, NavLink(active 类)
及路由管理组件:BrowserRouter , HashRouter ,
注:v6移除了withRouter高阶组件
3,路由实例及路由信息:
跳路由useNavigate(),实例化后直接跳路径; 或NavLink及Link
获取路由信息useLocation()
4,路由传参(参数都不丢失):
(1)动态路由(路由表提前配置):
useParams()获取动态路由参数
var navigate = useNavigate() navigate('/detail/'+88888) var params = useParams()
(2)state传参:
useLocation() 获取state参数
(3)查询字符串传参( query传参 ):
useSearchParams() 获取query参数
navigate('/detail?id=99999') var [searchParams,setSearchParams] = useSearchParams(); console.log( searchParams.get('id') );