[JavaScript从入门到放弃系列] 高级篇11.Vue.js之路由part2

Posted 2021-05-01 课工场大前端

上一篇《》我们学习了Vue中基本的路由。我们可以通过路由对象也就是VueRouter，来完成一个简单的单页应用。但路由不管在任何框架中都是重点，显然不会那么简单。

不过没关系，我们慢慢消化。本章再稍微学点东西吧。

我们不管有没有做web开发的经验，都知道一般请求中总会带一些参数，比如：

或者任何网站，随便点一点，都是如此。

那既然我们做单页应用也就是没有实际上的href跳转了，如何在路由中传递参数呢？

非常的简单

在路由中配置固定的参数名称，以冒号开头，然后组件中用$route.params.参数名来接她即可。

如果你写过Node.js对这种路由格式一定不陌生，非常的严格，参数顺序都不能乱。

那如果要传多个参数呢？

依然很简单。

其实传参的方式不止这一种，还有大家喜闻乐见的?name=abc这种方式的，这里不做赘述，大家自行搜索学习。

好了，路由参数简单的介绍了一下，我们抓紧时间看看下一个概念，嵌套路由。

啥叫嵌套路由呢？

比如我们约定，

/user/1001/orders  代表访问编号为1001这个人的订单列表页面（其实就是组件）

/user/1001/message 代表访问上面这人消息列表页面

我们之前学过了，组件都是可以嵌套的，那路由肯定也是要对应的嵌套啊。不可能为每个组件都创建个顶级路由吧。啥叫顶级路由？比如jd.com/index，不可能有jd.com/deleteuserbyid/1001这种吧。正常人都是jd.com/user/delete/1001

大家可以先回看一下上面的路由怎么写的。

好，前面介绍过 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件也可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>像这样：

显然要在嵌套的出口中渲染组件，我们需要在 VueRouter 的参数中加一点配置：

我们给每个顶级路由配置了一个children属性，也很好理解，就跟routes一样是个数组。

注意，children里面的路由是不需要/什么的，这样不需要我们去考虑嵌套路由的路径，Vue真的有点贴心。。。





按照上面的配置，当访问 /user/simba的时候，User组件的router-view出口是不会渲染任何东西的，因为没有匹配到对应的子路由嘛。如果我们想要默认渲染点什么，就要单独提供一个空的子路由：

好了好了。本章到此结束吧。路由还是要慢慢qiu。

还是要多练，光看一看觉得很简单，一看都会，一写都错。

为啥不愿意写一写试一试呢？

随便吧随便吧。

如果觉得这篇文章对你有帮助，不妨顺手关注+点赞+转发传播给更多想要进步的人。

PS：

青鸟中博的第一个ACCP前端班，每天晚上6.30~8.30，我授课，保证一定都是干货。周期三个月，学费特价5800，超值，0基础也包会，只要肯按时做作业。在校学生都很踊跃，剩余名额不多了，速速找我报名吧。微信：18305181376  QQ：674254975