2021-09-29

最新推荐文章于 2024-07-24 12:02:00 发布

爱吃兔子的萝北

最新推荐文章于 2024-07-24 12:02:00 发布

阅读量727

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/colorfulSnow/article/details/120552687

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了在VueRouter使用过程中遇到的多级嵌套路由无法渲染的问题及其解决方案。首先，确保每个子路由的父级包含router-view作为出口；其次，理解路由地址的拼接规则，避免在子路由中使用不必要的'/'；最后，针对多级嵌套的keep-alive缓存问题，推荐路由扁平化以简化处理。同时，展示了路由配置实例和不同场景下的路径匹配。

摘要由CSDN通过智能技术生成

记录vueRouter 使用中遇到的问题

多级嵌套路由渲染不出页面

const routerList = [
            { path: '/register', component: register ,name:'register'},
            { path: '/', redirect: '/login' },
            { path: '/1234ttest', redirect: '/test11' }, 
            { path: '/test', 
              component: login ,
              children:[
                    {
                        path: '/test1',
                        component: login,
                        children:[
                            {
                                 path: '/test11',
                                 component: test1,
                            }

                        ]
                      },
                      {
                        path: '/test2',
                        component: test2
                      }
            ]
            }
        ]

VueRouter 的两个主要标签 ,，要想页面渲染出来，必须保证当前路由层级有router-view 的出口。
解决思路：
1 、路由扁平化，将多级路由全部变成一级路由。

			[ { path: '/register', component: register ,name:'register'},
            { path: '/', redirect: '/login' },
            { path: '/1234ttest', redirect: '/test11' }, 
            { path: '/test',  component: login },
            { 
               path: '/test11',
              component: test1,
             },
       		{
                        path: '/test2',
                        component: test2
        }]

	2、保证每一个子级的父级都是一个router-view 。
	比如login 组件

 <template id="login">
        <div>
            <h1 style="text-align:center;">login111</h1>
            <div style="width: 100%;height: 500px;background: hotpink;border: 1px solid     #000;">
               <router-view></router-view>
           </div>
        </div>
    </template>

或者直接 componet: {render: (e) => e(“router-view”)};

2、多级路由的地址拼接
在VueRouter中 / 代表根路径
1、子路由地址一级级详细拼接那么除了最顶级父级外其他嵌套子项都不能加 /
2、直接显示子路由地址，不拼接父级地址，需要在每一个子项前加一个/

const  testRoute = 
		 [ { path: '/test', 
              component: login ,
              children:[
                    {
                        path: '/test1',
                        component: login,
                        children:[
                            {
                                 path: '/test11',
                                 component: test1,
                            }

                        ]
                      }
            ]
            }];
            //匹配test1  跳转地址就是 /test11 
	const  testRoute = 
		 [ { path: '/test', 
              component: login ,
              children:[
                    {
                        path: 'test1',
                        component: login,
                        children:[
                            {
                                 path: 'test11',
                                 component: test1,
                            }

                        ]
                      }
            ]
            }];
            //匹配test1  跳转地址就是 /test/test1/test11