文章目录
1. 单页面应用(SPA)
- SPA (single page web application) 应用
- vue 是单页面应用,所谓单页面应用就是页面发生改变并不会刷新,只是进行路由跳转
- 单页面应用就是根据 hash 值来变化的,当哈希值改变页面不会发生跳转
- vue 的单页面需要借助到 vueRouter 进行路由跳转
2. 路由的理解
2.1 什么是路由
- 一个路由就是一组映射关系(key - value)
- key 为路径, value 可能是 function 或 component
2.2 路由分类
- 后端路由:
- 理解:value 是 function,用于处理客户端提交的请求
- 工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
- 前端路由:
- 理解:value 是 component,用于展示页面内容
- 工作过程:当浏览器的路径改变时,对应的组件就会显示
3. react-router-dom的理解
- react 的一个插件库
- 专门用来实现一个 SPA 应用
- 基于 react 的项目基本都会用到此库
4. 路由的基本使用
4.1 路由的相关组件
-
BrowserRouter:历史模式路由
- 功能:用于包裹一个容器,使该容器中的路由以 history 模式展示
- 用法:
<BrowserRouter> <App/> </BrowserRouter>
-
HashRouter:hash 模式路由
- 功能:用于包裹一个容器,使该容器中的路由以 hash 模式展示
- 用法:
<HashRouter> <App/> </HashRouter>
-
Link:路由跳转
- 功能:进行路由路径的切换,页面上会转换成 a 标签
- 用法:
<Link to="/demo"> Demo </Link>
-
NavLink:加强版路由跳转
- 功能:Link 组件的加强版,选中时可自动添加类名,用法和 Link 一样
- 用法:
<NavLink activeClassName="active(默认)" to="/demo"> Demo </NavLink>
-
Route:注册路由
- 功能:通过对应的路由路径,展示对应的组件,也称注册路由
- 用法:
<Route path="/demo" component={Demo} />
-
Switch:改变路由匹配规则
- 功能:用于包裹 Route 组件
- 介绍:Route 每次进行切换时,都会全部进行匹配一次,但是使用了 Switch 只要匹配中了,就不会在向下匹配了,用于提高路由匹配效率
-
Redirect:路由重定向
- 功能:对路由进行重定向,当所有路由都无法匹配时,跳转到 Redirect 指定的路由
- 用法:
<Redirect to="/demo">
-
withRouter:加工一般组件
-
功能:对一般组件进行加工,使得一般组件可以使用路由组件的一些API
-
用法:
import { withRouter } from "react-router-dom"; class Demo extends Component {} export default withRouter(Demo)
-
4.2 Link与NavLink特殊用法
-
在写路由切换组件时,中间是肯定要写内容的,所以 Link/NavLink 一般都为双标签
-
还有一种单标签的写法,children 会自动把其中的值当做内容
<NavLink to="/demo1" children="Demo1" /> <Link to="/demo2" children="Demo2" />
4.3 组件的props.children(拓展)
// Demo 组件
class Demo extends React.Component {
render(){
console.log(this.props.children); // Hello world!
return xxx
}
}
<!--
其他组件
标签体是一个特殊的标签属性
-->
<Demo>Hello world!</Demo> === <Demo children="Hello world!" />
4.4 路由组件与一般组件
- 写法不同:
- 一般组件:
<Demo />
- 路由组件:
<Route path="/demo" component={Demo} />
- 一般组件:
- 存放位置不同:
- 一般组件:components
- 路由组件:pages
- 接收到的 props 不同:
- 一般组件:写组件标签时传了什么,props 就能接收到什么
- 路由组件:接收到三个固定的属性,history、location、match
4.5 路由的严格匹配
- 路由默认是模糊匹配,在 Route 组件上添加 exact 属性,开启严格匹配
- 不要随便添加 exact 属性,可能会导致二级路由无法匹配
4.6 push与replace
<!-- link 默认开启的是 push 模式 -->
<Link replace to="/demo">Demo</Link>
4.7 路由重定向
重定向也是使用组件,功能与用法在路由相关的组件有写
5. 嵌套(多级)路由
5.1 嵌套路由规则
- 注册子路由时要写上父路由的 path 值
- 路由的匹配是按照注册路由的顺序进行的(先父后子)
5.2 路由传参
-
params
<!-- 跳转路由时,传递参数 --> <Link to="/demo/10/标题"></Link> <!-- 注册路由时,声明参数 --> <Route path="/demo/:id/:title" component={Demo} />
// 路由组件中,接收参数 render(){ let params = this.props.match.params }
-
search/query
<!-- 传递参数 --> <Link to="/demo/?id=10&title=标题"></Link>
// 接收参数 // React 帮忙下载了 qs 库 import qs from "querystring" render(){ let search = this.props.location.search // "?id=10&title=标题" let { id, title } = qs.parse(search.slice(1)) }
-
state/body
<!-- 传递参数 --> <Link to={{pathname: "/demo", state: {id:10, title:"标题"}}}></Link>
// 接收参数 render(){ let state = this.props.location.state }
6. 编程式路由
-
push
// 追加一条路由 this.props.history.push("/demo/10/标题") // 传递 params 参数 this.props.history.push("/demo/?id=10&title=标题") // 传递 search 参数 this.props.history.push("/demo",{id:10,title:"标题"}) // 传递 state 参数
-
replace
// 替换当前路由,用法和 push 一样
-
goBack
// 后退 this.props.history.goBack()
-
goForward
// 前进 this.props.history.goForward()
-
go
// 大于0前进,小于0后退,等于0刷新 this.props.history.goBack(n)
7. BrowserRouter与HashRouter
-
history:BrowserRouter
- 是对浏览器的历史记录进行操作,可以看到当我们点击浏览器的前进/后退按钮时,浏览器并不会进行刷新,这就是对浏览器历史记录进行的操作
- BrowserRouter 使用的是 H5 的 history API,不兼容 IE9 以下版本
- 不带 # 号
-
hash:HashRouter
- 更改不同的锚链接切换对应的组件,锚链接的更改并不会对浏览器进行刷新
- HashRouter 刷新后会导致路由的 state 参数丢失
- 带 # 号