路由嵌套是一个很常见的的功能

  • 比如在home页面中,我们希望通过/home/news和/home/messages访问一些内容
  • 一个路径映射一个组件,访问这两个路径也会分别渲染连个组件

路径和组件的关系如下

请输入图片描述


在router/index.js中通过children配置/home的子路径
请输入图片描述


在Home.vue中使用router-link和router-view
请输入图片描述


运行结果:

  • 当路径为/home时,Home.vue组件渲染
  • 点击news或messages时,在router-view中渲染对应组件

请输入图片描述


其他vue-router文章

vue-router的安装和配置方式
将router修改为HTML5的history模式 & router-link的其他属性
vue的动态路由
vue的路由懒加载
vue路由的嵌套
vue-router参数传递
vue-router导航守卫
vue-router的keep-alive