《Vue应用开发》课件——5.4嵌套路由.pptxVIP

嵌套路由5.4

先定一个小目标！掌握嵌套路由的使用方法，能够实现路由的嵌套5.4嵌套路由

什么是嵌套路由？5.4嵌套路由

嵌套路由是指通过路由实现组件的嵌套展示，它主要由页面结构决定。实际项目中的应用界面通常由多层嵌套的组件组合而成，为了使多层嵌套的组件能够通过路由访问，路由也需要具有嵌套关系，也就是在路由里面嵌套它的子路由。5.4嵌套路由

下面演示嵌套路由的简单配置。在src\router.js文件的路由匹配规则中通过children属性定义子路由匹配规则。routes:[{path:父路由路径,component:父组件,children:[{path:子路由路径1,component:子组件1},{path:子路由路径2,component:子组件2}]}]5.4嵌套路由

在组件中定义子路由链接的语法格式如下。router-linkto=/父路由路径/子路由路径/router-link当使用children属性定义子路由匹配规则时，子路由的path属性前不要带“/”，否则会永远以根路径开始请求。注意5.4嵌套路由

步骤1在src\components目录下创建pages目录，用于存放子路由组件。步骤3步骤4步骤2步骤5演示嵌套路由的实现5.4嵌套路由

创建src\co