嵌套路由写法

原创已于 2022-07-27 18:16:44 修改 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-07-27 18:08:49 首次发布

vue实战专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Vue.js中如何实现嵌套路由，通过创建一个films页面，并在其中包含nowPlack和comeSinge两个子页面来演示。导入相关组件后，利用redirect进行重定向，使用children定义子页面，实现父子页面的嵌套关系。

首先创建一个films页面

<template>
    <div>
        films页面
        <div style="height:100px;background:yellow;">轮播图</div>
        <div>二级声明式导航</div>
        <!--router-view相当于给孩子页面占得位置，通过这个组件，孩子页面触发的时候，孩子页面的内容将会显示出来-->
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data(){
        return{
            
        }
    }
}
</script>

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

template>
    <div>
        nowPlack页面 
    </div>
</template>

<template>
    <div>
        comeSinge页面 
    </div>
</template>

下面是路由：
引入几个页面
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'
            }
        ]
    },

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

这里主要还是嵌套路由的一个写法，具体功能可以自己去写一下
我这里要做的大概是这种
在这里插入图片描述
两个子页面是包含在父里面的内容