router子路由

挂载子路由（第6行）：

嵌套路由：

转到 A1 后，上一级的页面内容还在。这是子路由时的效果

A 页面实现转向 A1，必须添加<router-view>标签，否则无法显示 A1。

a1 页面，实现返回上一级和返回首页

添加 A 页面的子路由 A1

实现三级跳转

这节课讲嵌套路由

子路由挂载<router-view></router-view>

父子页面，父页面子页面同时存在的情况。

子路由设计，router页面

实现嵌套路由 children:[{},{}]

实现嵌套路由的效果：children：[{},{}]

挂载路由：

<router-view></router-view>

在项目案例效果二的基础上，实现嵌套路由的效果：children:[{},{}]

挂载：<router-view></router-view>

router 实现子页面跳转再返回

创建A、B的子页面A1、B1 .vue结尾的文件

页面中编辑

index.js中的配置与逻辑

import A1与B1

A1属于A所以在A的跳转配置中加入字段

children:[{ //常用于父框架中嵌入子页面的操作，会保留父框架的内容嵌入子框架

    path: '/a1',

     name: 'A1',

     component: A1

},{}];

并在A页面的<router-link to="/A1">标签加入跳转路径

<router-view></router-view>：用于挂载子页面的位置，必须在父页面中添加这个标签，才能把要挂载的子页面显示到<router-view></router-view>中

子路由 children：[{

path:'/A1'

component:A1

},

]

children[{},{}]

子路由需要在父路由页面加<router-view></router-view>进行挂载,

子路由的页面会连同父页面一同显示出来

router实现子路由

实现嵌套路由到效果：children:[{}.{}]

【注意】使用children会父页面和子页面一起显示，如果不想一起显示就使用平行路由即可

本节课讲了子路由

A跳转至B    B跳转C 

B页面中需要 写<router-view></router-view>挂载, B和C页面同时显示

路由routes中配置

{

        path: '/B',

        component: B,

        children: [{

            path: '/C',

            component: C

        }]

    }

,

子组件要显示在父组件中需要占位符：<router-view></router-view>

嵌套路由 children:[{},{}]

<template>

<div>

<p>我是A。。。。。</p>

<p><router-link to="/">返回</router-link></p>

<p><router-link to="/A1">转向A1</router-link></p>

<router-view></router-view>

</div>

</template>

只在父级vue组件中添加router-view标签, 用来作为子路由组件的挂载点

嵌套路由 children:[{},{}]

<template>

<div>

<p>我是A。。。。。</p>

<p><router-link to="/">返回</router-link></p>

<p><router-link to="/A1">转向A1</router-link></p>

<router-view></router-view>

</div>

</template>

添加子路由：

注册父子路由，如图所示；需要在父页面上挂载路由，加上router-view；

router-view挂载子路由

子路由children

挂载子路由

用子路由的方式打开页面的时候会将父路由的页面内容也显示出来

子组件要显示在父组件中需要占位符：<router-view></router-view>