嵌套的路由

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

试一下嵌套路由,Nested Routes .. 比如我们的活动组件的下面,可能需要一个评论列表 .. 在这个路由里面,添加一个 children .. 它是一个数组 .. 数组里的项目又是一些路由,这些路由就是被嵌套在了 events/:id 这个路由里面了 ..

添加一个 path 属性,设置一下路由的地址 .. 比如 comments .. 这个地址你也可以使用 / 开头 .. 表示从根开始 .. 这里我没用斜线 .. 那这个路由匹配的地址应该就是 events/:id/comments

另起一行 .. 再加上一个 component .. 对应的组件是 Comment .

上面,我们再去定义一下这个 Comment 组件 . const Comment .. 里面添加一个 template .. 用一个字符模板 .. 模板的根下面只能包含一个元素,所以我们可以先添加一个包装 .. 用一组 div .. 里面加上一个水平线 .. 上面再添加几个 css 类 .. 下面是个 h2 标签包装的文字 .. 评论 ..

组件里面可以有自己的 router-view .. 在 Event 这个组件的模板里面 .. 把它改成一个字符模板 .. 再添加一个包装 .. 然后是标题 .. 下面我们再用一个 router-view 组件 .. 它会显示被嵌套的东西 ..

回到浏览器 .. 可以预览一下 .. 访问一下 events 斜线 .. 一个 id .. 斜线 .. 再加上 comments ..

你会发现 .. 页面上又会显示一个 评论 .. 这个内容就是一个 Comment 组件 ..

0:00
0:00
2:46

嵌套的路由《 Vue.js:路由 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点