专业做网站方案ppt中国建设银行个人登录查询入口

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链接点击跳转路由，根据我们的需要来自由控制跳转路由的方式。