Vue基于抽象路由模式实现页面嵌入

抽象路由模式abstract是vue路由中的第三种模式。它用于在不支持浏览器API的环境中充当回退，无论是哈希还是历史模式。两者都会对浏览器上的url产生影响。本文要实现的功能是在已有的路由页面中嵌入其他路由页面，并保持当前页面的路由路径在浏览器中显示。这使用抽象的一种路由模式，与浏览器分离。路由示例exportconstroutes=[{path:"/",redirect:"abstract-route",},{path:"/embed-route",name:"embedded",component:()=>import(/*webpackChunkName:"embed"*/"../views/embed.vue"),},{path:"/abstract-route",name:"abstract",component:()=>import(/*webpackChunkName:"摘要"*/"../views/abstract.vue"),},];constrouter=newVueRouter({mode:"history",base:process.env.BASE_URL,routes,});这个例子有两条路由分别是abstract和embedded。在抽象视图上展开一个抽屉，抽屉中显示内嵌视图。即：//抽象视图//嵌入视图router-drawer默认为当前项目封装了history的路由方式，所以进入抽象页面时，浏览器Url为http://127.0.0.1:8010/abstract-route，router-drawer需要做什么在此基础上，重新实例化一个抽象模式的路由，然后在组件中使用挂载要嵌入的目标页面。即：通过打印日志可以得到两个实例化的路由：这样可以实现在不改变当前页面路径的前提下加载其他路由中的View。代码示例