Vue使用日记(24):vue-router详解(5)——嵌套路由

ぐ巨炮叔叔 提交于 2019-11-29 08:54:17

嵌套路由

嵌套路由是一个很常见的功能,比如在home页面中,我们希望通过/home/news/home/message访问一些内容,一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。也就是在大页面home下面嵌套/home/news/home/message这两个路由,组件切换是在home这个大页面进行。

实现步骤演示:

1、首先定义两个子组件,用于进行嵌套:

2、然后配置嵌套路由映射关系,这里是在home这个大页里面嵌套,嵌套的时候使用children关键字:

3、然后使用这两个嵌套路由,注意是在home组件里面使用,因为是在home里的嵌套:

注意:这里需要注意to属性里的路径,需要写完整的这种路径“/home/message”,如果不这样写,<router-view>标签将无法识别渲染对应的路由,因为别忘了App.vue组件里也有使用<router-view>标签,写完整路径才能让该标签识别是App组件的还是home组件的嵌套路由。

4、如果需要配置默认路径,即一进来就显示的路径,则和非嵌套路由的配置方式一样,使用redirect:

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!