vue实现多级路由的思维

Posted 2023-04-12

参考技术A 一级路由包含二级路由再包含更多的子路由，需要缓存的页面用keepalive 包括就OK，但是每次回到上级路由，是否刷新当前页面？

答案是肯定的，从下级路由回到上级，可以用keeplive，直接复用内存里的，不用二次加载。

另外就是keeplive 要在vuerouter标签之外、

二 一个就是要实现多级路由复用一个组件的问题，数据展示页，数据和样式的组合，再被渲染到展示页面。

具体怎么实现不知道，props貌似能做的有限。目前数据是写死的，然后比较简单。这个用什么去搞呢？？

所以，挂在路由页面之前，要渲染数据，那么在数据的获取的方式就有很多种，所以需要再考虑一下。

现在希望，进入二级路由之后，页面产生三级路由，三级路由点击之后，还是在二级路由，或者说如何销毁上级路由的内容呢？

Vue嵌套(多级)路由

前言

嵌套路由就是在路由里面继续加一个新的路由。也叫多级路由，其实就是套娃
在开发中，很少会套到六层路由，一般到达4或5层路由已经达到极限了，明白了路由的规律，不管套多少层都是一样的，下面演示二级路由

配置多级路由(childen)

如下图所示，目前都是一级路由

如果想要配置多级路由，继续在路由里面配置即可

这里要用到children配置项,它的值是一个数组，因为这个一级路由可能有n多个子路由

children里面的path不需要加杠了,底层遍历的时候会自动加入

// 该文件专门用于创建整个应用的路由器

// 引入路由器
import VueRouter from "vue-router";
// 引入组件
import Abotu from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
// 创建并且暴露文件一个路由器
export default new VueRouter(
    // 配置路由 本质是一个数组，在里面配置多组路由，每一个路由都是一个key和value映射对象
    routes:[
        
            path:'/about',
            component:Abotu
         ,
        
            path:'/home',
            component:Home,
            //配置子路由
            children:[
                // 第一个子路由
                
                    // 此时path不需要加杠了,底层遍历的时候会自动加入
                    path:'news',
                    component:News
                ,
                 // 第二个子路由
                 
                    path:'message',
                    component:Message
                
            ]
         ,
        
    ]   
)
 

使用多级路由

配置完多级路由之后，使用的必须把一级路由和二级路由完整的路径写到to属性中

总结

1 配置路由规则，使用children配置项：

routes:[
        
                path:'/about',
                component:About,
        ,
        
                path:'/home',
                component:Home,
                children:[ //通过children配置子级路由
                        
                                path:'news', //此处一定不要写：/news
                                component:News
                        ,
                        
                                path:'message',//此处一定不要写：/message
                                component:Message
                        
                ]
        
]

2 跳转（要写完整路径）

<router-link to="/home/news">News</router-link>