文章目录
router-view
javascript
<router-view></router-view>
router-view 是Vue Router中的一个组件,用于渲染匹配到的路由组件。它是用来显示当前路由对应的组件内容的占位符 。 即当前路由组件会在占位符对应位置显示出来。
<router-view></router-view>
标签将会根据当前路由的路径匹配到相应的路由组件,并将其内容渲染在这个位置。
router-view的嵌套
在<router-view></router-view>
中嵌套一层<router-view></router-view>
标签可以用来渲染路由的子路由。
可以在不同的层级使用 <router-view>
来渲染每个嵌套路由对应的组件。外部的 <router-view>
负责渲染父级路由的组件,而位于父组件内部的内部 <router-view>
负责渲染子级路由的组件。
假设你有一个父级路由 /home 和一个子级路由 /home/profile 。当用户导航到 /home 时,与 /home 路由关联的组件将在外部的 <router-view>
中渲染。然后,如果用户导航到 /home/profile ,与 /home/profile 路由关联的组件将在父组件内部的内部 <router-view>
中渲染。
router.addRoute
router.addRoute 可以动态添加一条新路由。
javascript
router.addRoute(route: RouteConfig): () => void
router.addRoute 还可以为现有路由添加子路由。
javascript
router.addRoute(parentName: string, route: RouteConfig): () => void
复杂嵌套实例
采用动态路由的方式添加路由,根据后端返回的路由信息动态渲染路由菜单,根据路由信息在不同的 <router-view>
位置加载不同的组件
系统静态路由如下:
javascript
export const staticRouter: RouteRecordRaw[] = [
{
path: "/",
redirect: HOME_URL
},
{
path: LOGIN_URL,
name: "login",
component: () => import("@/views/login/index.vue"),
meta: {
title: "登录"
}
},
{
path: "/layout",
name: "layout",
component: () => import("@/layouts/index.vue"),
// component: () => import("@/layouts/indexAsync.vue"),
redirect: HOME_URL,
children: []
}
];
通过调用api获取路由信息,json数据如下:
javascript
{
"code": 200,
"data": [
{
"path": "/home/index",
"name": "home",
"component": "/home/index",
"meta": {
"icon": "HomeFilled",
"title": "首页",
"isLink": "",
"isHide": false,
"isFull": false,
"isAffix": true,
"isKeepAlive": true
}
},
{
"path": "/test/vslot",
"name": "vslot",
"component": "/test/vslot-test/a",
"meta": {
"icon": "Histogram",
"title": "vslot-test",
"isLink": "",
"isHide": false,
"isFull": false,
"isAffix": false,
"isKeepAlive": true
}
}
使用router.addRoute动态添加路由
authStore.flatMenuListGet方法用于获取每一个路由,并且将子路由合并成一维数组,即做数组扁平化处理
通过判断item.meta.isFull,如果是false,则为layout的子路由,在内部 <router-view>
中显示,如果是true,则直接加入路由中,与layout同级,在第一层 <router-view>
中显示,即覆盖全屏
javascript
import router from "@/routers/index";
import { useAuthStore } from "@/stores/modules/auth";
/**
* @description 初始化动态路由
*/
export const initDynamicRouter = async () => {
const authStore = useAuthStore();
try {
authStore.flatMenuListGet.forEach(item => {
item.children && delete item.children;
if (item.component && typeof item.component == "string") {
item.component = modules["/src/views" + item.component + ".vue"];
}
if (item.meta.isFull) {
router.addRoute(item as unknown as RouteRecordRaw);
} else {
router.addRoute("layout", item as unknown as RouteRecordRaw);
}
});
} catch (error) {
// 当按钮 || 菜单请求出错时,重定向到登陆页
userStore.setToken("");
router.replace(LOGIN_URL);
return Promise.reject(error);
}
};
则最终的效果是在app.vue中有一个 <router-view>
占位符,会渲染Login、layout等组件,在layout内部的Main组件中嵌套一个 <router-view>
占位符,则会渲染layout组件的子路由,包括动态加入的路由
总结
即通过 <router-view>
的嵌套,实现了父路由和其children数组中路由对应组件的对应显示位置及效果,当前路由切换时,如果是子路由,则只会在内部的 <router-view>
部分进行更新。