vue 基于abstract 路由模式 实现页面内嵌的示例代码
abstract 路由模式
abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式。 路由示例 export const routes = [ { path: "/", redirect: "abstract-route
Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 中，路由管理是通过 Vue Router 这个官方插件来实现的。Vue Router 提供了多种模式，包括 hash、history 和 abstract。本篇文章将深入探讨如何基于 abstract 路由模式在 Vue 应用中实现页面内嵌。
`abstract` 路由模式是一种不依赖浏览器特定 API 的模式，主要用于不支持 `pushState` 或者 `hashchange` 事件的环境，如服务器端渲染 (SSR) 或者简单的非浏览器环境。在这种模式下，路由的切换不会改变浏览器的 URL，但依然可以通过程序控制路由状态。
在给定的示例中，我们有两个主要的路由：`abstract-route` 和 `embed-route`。`abstract-route` 页面会展示一个抽屉组件 (`RouterDrawer`)，而 `embed-route` 页面则是要被内嵌的视图内容。抽屉组件会在 `abstract-route` 页面上打开，显示 `embed-route` 的视图。
为了实现这一功能，我们需要在路由配置中定义这两个路由，并设置相应的组件：
```javascript
export const routes = [
{ path: "/", redirect: "abstract-route" },
{
path: "/embed-route",
name: "embedded",
component: () => import(/* webpackChunkName: "embed" */ "../views/embed.vue"),
},
{
path: "/abstract-route",
name: "abstract",
component: () => import(/* webpackChunkName: "abstract" */ "../views/abstract.vue"),
},
];
```
然后创建一个 Vue Router 实例，设置模式为 `history`，并应用上述路由配置：
```javascript
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
```
在 `abstract-route` 的模板中，我们使用一个自定义的 `RouterDrawer` 组件，它会在点击按钮时打开，并显示 `embed-route` 的内容。`RouterDrawer` 组件内部使用 `<router-view/>` 来挂载内嵌的视图。
`RouterDrawer` 组件的实现关键在于创建一个新的 Vue Router 实例，该实例使用 `abstract` 模式，并在抽屉组件内部使用 `<router-view/>` 来呈现内嵌的 `embed-route`：
```html
<template>
<el-drawer
:visible.sync="visible"
v-bind="$attrs"
:before-close="handleClose"
>
<router-view />
</el-drawer>
</template>
<script>
import { routes } from "../router/index";
import VueRouter from "vue-router";
export default {
name: "router-drawer",
props: {
path: {
type: Object,
required: true,
},
visible: {
type: Boolean,
required: true,
default: false,
},
},
router: new VueRouter({
mode: "abstract",
base: "/",
routes,
}),
methods: {
handleClose() {
this.$emit("update:visible", false);
},
},
// ...
};
</script>
```
这个例子展示了如何在已有的路由页面（如 `abstract-route`）中内嵌其他路由页面（如 `embed-route`），并且在浏览器 URL 不变的情况下实现页面的动态切换。这种做法在构建复杂单页应用 (SPA) 或需要在特定场景下控制路由行为时非常有用。
Vue Router 的 `abstract` 模式提供了一种独立于浏览器环境的路由管理方式，使得在不改变浏览器 URL 的情况下能够实现页面内容的动态更新。通过结合自定义组件和子路由器，我们可以创建出更灵活且具有深度的页面结构。
