Vue 面包屑三级路径改变但页面不跳转解决方案

一、业务场景：
最近在使用Vue框架和antd-vue组件库的时候，发现在面包屑 组件内跳转多级时地址栏地址和页面上面包屑改变了，但是界面不跳转。为了大家后面遇到和我一样的问题，给大家分享一下

二、bug信息：

三、问题原因：
点击详情按钮时路径改了，页面其实也改了。只不过他们用的是同一个路由容器，三级页面层级不够，被遮挡住了。

四、解决方案：
第一步：（1）一般在大页面（Layout组件）的路由容器上加个key
(2)在二级路由上面添加一个空容器也行
两种都行（二选一即可）

（1）
<router-view ：key="key">
		<router-view>
				页面
  		</router-view>
</router-view>


computed:{
key(){
   			return this.$route.path + Math.random()
   		}
	}

（2）
不管嵌套几层，都写在第二层
          component: {render(c) { return c('router-view') }},

第二步：在二级路由里面放一个路由容器（router-view）

第三步：在三级路由的根元素里面添加上样式

    <div style="position:absolute;background: white; width:calc(86%);height: calc(96%);z-index: 999;">
      我是商品详情
    </div>

五、效果展示：

你已经成功了，撒花。
今天的分享到此结束，欢迎小伙伴们一起交流