路由的分类
window.location.href = 'http://www.baidu.com';
history.back();// 路由后退
window.location = '#hash';
window.onhashchange = function(){
console.log(window.location.hash)
}
history.pushState('name','title','/path');// 推进一个状态
history.replaceState('name','title','/path'); // 替换一个状态
window.onpopstate = function() {
console.log(window.location.href); // 获取整个URL字符串
console.log(window.location.pathname); // URL 的路径部分(就是文件地址)
console.log(window.location.hash); // 查询(参数)部分
console.log(window.location.search); // 锚点hash值
}
react路由 react-router-dom
-
路由方式
<BrowserRouter>h5路由 ，需要后端进行配置
<HashRouter>hash路由，
-
路由规则
<Route>，
<Route path="/home" exact component={Home}></Route>
( exact ) 为纵向匹配 如果是嵌套路由则不可用
-
路由选项
<Switch>，可以解决路由的多次匹配，为横向匹配
-
跳转导航
<Link/>，路由的跳转类似a标签
<NavLink>，在Link的基础上增加了一些选中状态，一般用作导航菜单
<NavLink to='/home' activeClassName="selected"></NavLink>
路由切换TAB选中样式 也可activeStyle={{color:'red'}} 直接添加样式
-
自动跳转
<Redirect to='/' />路由重定向 一般配合Switch使用
路由参数的获取
<Link to='/home/123'/> // 传递参数
<Route path="/home/:id" component={Home}></Route>// 定义参数名称
this.props.match.params.id // 在Home组件中接受数据
多条路由匹配
<Link to="/a">不带参数，组件A</Link>
<Link to="/a/123">带参数，组件A</Link>
<Link to="/a/sub">组件A下的sub 组件</Link>
<Switch>
<Route exact path={`${this,props.match.path}`} render ={(route) => {
return <div>当前组件是不带参数的组件A</div>
}}/> // exact为完全匹配，只会匹配 /a
<Route path={`${this,props.match.path}/sub`} render ={(route) => {
return <div>当前组件是组件A下的sub组件</div>
}}/> // Switch会将第一个匹配到的路由返回，而不会继续向下匹配
<Route path={`${this,props.match.path}/:id`} render ={(route) => {
return <div>当前组件是带参数的组件A，参数是{route.match.params.id}</div>
}}/>// 一般都是将通配路由放在最后面
</Switch>
