1.嵌套路由
这里我们希望在Home路径展示区里面嵌套一个新的导航区,以及对应的展示区。
这里我们的News路由组件和Message路由组件作为Home路由组件的子组件。这样形成嵌套路由。
怎么实现呢?
这是我们第一层导航栏中的路由,有about,home以及如果当前没有显示的路由,就显示about路径下的路由。
因为Message以及News路由组件是Home路由组件的子组件,我们直接在Home文件夹下存放,然后我们给Home组件的展示区添加路由链接,但是这时候我们是看不到的,因为/news找不到,因为路由的匹配是逐层匹配,去先注册的路由里面找,但是是找不到news的所有自动重定向到了about组件。也就是说第一层有了才能去第二层寻找。
所以这种可以先匹配到home再去匹配news或者message路径,这样可以正常的改变路径了。每一次注册路由必须从前往后全程走一遍。只有第一层找到了才会去下一层路由寻找。这里是多个路由链接,注册自然是多个路由。这个前后顺序是按照路由的注册顺序来的
swtich优化匹配过程,但是我们嵌套路由是不可以使用严格模式的,因为这样会导致无法匹配,因为/home/news在严格模式是匹配不到的。这样我们就实现了路由的嵌套。
2.向路由组件传递params参数
我们嵌套了路由之后,我们Message路由组件再来一个导航区和展示区。
这是我们想要实现的效果,其中id和title我们希望是我们传过去的,也就是使用路由组件的时候,传递参数让其展示区可以动态展示。
我们在Message文件夹搞一个Detail文件夹作为第三层路由组件,也是子组件,我们在定义detail路径链接的时候把参数通过params传递过去。
我们遍历我们提前写的数组对象,然后用params参数传递数据,格式是路由后面跟参数,用${state}这样的方式传递,但是用这种方式在注册路由的时候声明接收的是params参数,用的:id告诉组件Detail参数名字是id,然后我们就可以在Detail组件里面用解构赋值拿到this.props.match.params,为什么是在match对象里,通过输出this.props可以看到。这样就拿到了id和title,通过id找到我们在Detail组件定义的数组数据中id一样的content展示,我们就实现了这个过程。
这样我们就实现了params参数这种方式传递参数
3.向路由组件传递search参数
其实传递参数的原理是一样的,只是写法以及接收的方式不同,还有就是传search参数不需要声明。
这样我们就注册好并且传参给了Detail组件。我们在控制台查看传到了props的那个地方。
我们发现确实给到了search,但是?key=value&key=value这种字符串,不是对象,那我们就没办法通过{}展示了,我们需要变为对象格式的。
我们把对象变为这种key=value字符串的写法叫做urlencoded编码,我们反过来需要用qs库里面的qs方法里的parse api。
我们就可以把key=value转化为对象,但是我们还有一个?slice(1)是去掉我们keyvalue之前的?,不然会变成?Id=001这种。我们写一下,
const {id,title} = qs.parse(search.slice(1))
这样拿到了展示就可以了。
4.向路由组件传递state参数
这种是通过对象的形式,也是非常简单易懂,参数之间通过state对象传过去,而且不需要声明参数,直接接收。
解构赋值获取id title就可以直接展示了。但是这里有个问题地址栏没有数据,说明我们把state参数存到了history历史记录中,如果我们清除浏览器的缓存,就会丢失state参数(刷新不会丢失)。因为当我们使用路由组件的时候,默认传的参数里面的state是undefined。这里我们清除缓存就会变成undefined。
我们可以用空数组来展示当丢失缓存之后,保证不会报错。
5.Push和replace
我们定义的路由链接是默认push一个路径到历史记录中。
历史记录大概是这样的栈结构,每次点击路由链接都会push一个新的路径作为栈顶来展示,我们可以在定义路由链接的时候加上replace。
这样我们点击链接跳转路径的时候就不是push一个新的,而是直接把当前栈顶的替换掉了,也就是我们后退直接到了news而不是message,因为message被替换掉了。
6.编程式路由导航
现在我们的嵌套路由在跳转链接的时候都是通过点击这个链接,这并不能满足我们的需求,我们往往需要去点击图片,或者按钮等各种方式去跳转路由展示不同的功能。
这里我们添加按钮点击事件来操作路由的改变。给消息一这个路由链接添加两个按钮,第一个push查看,第二个replace查看。
这是按钮的点击事件,这其实是调用了history的api来完成的,当我们调用api的时候,只需要输入(path,state)也就是填写路径和参数,就自动帮我们跳转到了路由并且传递参数展示我们想要展示的内容,完美的替代了链接。
或者这种按钮点击事件回退或者前进,也是通过history的api以及history栈结构实现的,通过操作路由的前进后退来展示不同的内容。
go这个api的参数是正负值,决定回退还是前进,总之编码式路由导航就是不止是单纯的link或者navlink链接点击跳转路由,根据我们的需要来自由控制跳转路由的方式。