nuxt.js 多重动态路由嵌套，路由变化，页面不变化问题


本人的业务逻辑场景为
``

1
2
3
4
5
6
                                            `/list/category-b/category-sub-b/page-4`
                                            `/list/category-a/category-sub-a/page-2`
 /list/category-a/category-sub-a/page-1 =>  
                                            `/list/category-a/category-sub-b/page-1`
                                            `/list/category-b/category-sub-b/page-3`                                           
 .....等等情况，其中 category-a、category-sub-a、page-1 三段路由皆为动态变化的

于是选择了nuxt.js提供的 动态嵌套路由解决方案来解决问题，文档传送门
在这里插入图片描述
在这里需要注意，使用了动态嵌套路由就需要去配合nuxt-child以及监听路由变化 $route一起使用，如果像本人这种，为了偷懒省事，开发环境 dev 效果正常，build之后在线上环境全部失效的bug就会出现。所以这里需要进行如下配置
1.将需要动态变化的部分提取放在最深的vue文件中
在这里插入图片描述
将基本不会发生改变的部分可以放在最外层的 _id.vue文件中，在_page.vue文件中监听路由的变化，在路由变化时去获取最新数据，这样就不会出现点击路由跳转，页面不变化的问题。最后，一定要按文档的路由格式来，不要自我突破，少写vue文件，否则可能会导致build编译问题。