嵌套路由写法

首先创建一个films页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

然后创建一个films文件夹，在下面放两个子页面：（这里这两个页面相当于孩子页面）
nowPlack
comeSinge

template>
    

        nowPlack页面 
    

1
2
3
4
5

1
2
3
4
5

下面是路由：
引入几个页面
import Films from ‘@/views/films.vue’
import NowPlack from ‘@/views/films/nowPlack.vue’
import comeSinge from ‘@/views/films/comeSinge.vue’

{
        path:'*',
        redirect:'/films'
 },
 {
        path:'/films',
        component:Films,
        children:[
            {
                path:'/films/nowPlack',
                component:NowPlack
            },
            {
                path:'/films/comeSinge',
                component:comeSinge
            },
            //下面这段代码是指在两个孩子页面切换后返回上级films页面时，两个孩子页面的内容都会消失，films主页面一部分内容就会显示空白（而这一部份空白原本就是子页面的内容地，而现在子路由相当于处于还没有嵌套上去），所以我们在主页面浏览完两个子页面的内容返回上级films页面时，可以再重定向去到这个页面/films/nowPlack
            //这段代码简而言之就是我们路径是/films时，会自动重定向到/films/nowPlack
            {
                path:'/films',
                redirect:'/films/nowPlack'
            }
        ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

redirect：重定向
children：子页面，孩子

这里主要还是嵌套路由的一个写法，具体功能可以自己去写一下
我这里要做的大概是这种

两个子页面是包含在父里面的内容