观察：Blazor和Vue对比学习（进阶.路由导航二）：布局(母版/嵌套)

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

观察：Blazor和Vue对比学习（进阶.路由导航二）：布局(母版/嵌套)

2022-12-10 17:09:18 来源：博客园

单文件组件框架中，当更改请求地址时，并不会引发页面跳转，而是由框架捕获请求地址（在框架中我们称之为路由），然后根据路由与组件的映射关系，在页面的指定位置切换和显示组件。在哪个位置显示（称之为路由出口），就是布局要解决的问题。无论是Vue，还是Blazor，我们都能以母版页的方式来理解和使用布局。母版页，就是布局的整个页面环境，我们可以在母版页的指定位置，放一个占位符，这个占位符作为路由出口，Vue使用【】组件作为占位符，而Blazor中使用【@Body】指令。母版页本质上也是组件，所以我们可以将“在路由出口”显示的组件也成为母版页，这样就可以实现复杂的嵌套布局。文字描述，比较晦涩，下面通过案例直接上手。

一、案例说明：如图所示，首屏为左右结构，左侧显示文字链接“关于”和“动物”，右侧是一个路由出口。点击“关于”时，直接在路由出口上显示“About组件”。点击“动物”时，切换到Animal组件，Animal组件也是一个母版页，上下结构，上方显示文字链接“PandaDetail”和DogDetail“”，下方是动物组件的路由出口，点击上方链接时，将切换显示“PandaDetail组件”和“DogDetail组件”。

(资料图片仅供参考)

二、Blazor实现（忽略CSS样式）。文件结构包括：App.razor（路由管理器并设置顶层母版）、MainLayout.razor（默认顶层母版）、Index.razor（首页）、About.razor、Animal.razor（二层母版）、PandaDetail.razor、DogDetail.razor。

1、App.razor（路由管理器并设置顶层母版）

                                    Not found                    抱歉，未找到请求的页面.

2、MainLayout.razor（默认顶层母版）

@inherits LayoutComponentBase嵌套布局                        首页
                            关于
                            动物
            
            @Body

3、Index.razor（首页，本案例中没有实际意义）

@page "/"首页这里是首页
@code{}

4、About.razor

@page "/about"关于这里是关于页About.razor
@code {}

5、Animal.razor（二层母版）

@page "/animal"@layout MainLayout@inherits LayoutComponentBase动物这里是动物页Animal.razor
熊猫详情狗狗详情    @Body
@code {}

6、PandaDetail.razor、DogDetail.razor，Animal的子页面

@page "/animal/panda-detail"@layout Animal这里是熊猫详情页PandaDetail.razor
@code {}@page "/animal/dog-detail"@layout Animal这里是狗狗详情页DogDetail.razor
@code {}

三、Vue的实现（忽略CSS样式）。文件结构包括：Router/index.js（路由管理器）、App.vue（顶层母版）、About.vue、Animal.vue（二层母版）、PandaDetail.vue、DogDetail.vue。

1、App.vue（顶层母版）

2、About.vue

3、Animal.vue（二层母版）

4、PandaDetail.vue和DogDetail.vue

5、Router/index.js（路由管理器），嵌套设置主要在路由管理器中进行

//路由使用了name属性，用于指定路由的别名//导航时即可以使用路径path: 关于//也可以使用别名name: 关于//RouterLink和router-link一样import { createRouter, createWebHistory } from "vue-router"const routes = [  {    path: "/",    name: "home",     component: ()=> import("../views/Index.vue"),  },  {    path: "/about",    name: "about",    component: () => import("../views/About.vue")  },  {    path: "/animal",    name: "animal",    component: () => import("../views/Animal.vue"),    //Animal的子路由，以下路由的组件，在Animal组件的路由出口的切换显示    children:[      {        path:"/panda-detail",        name:"panda-detail",        component: () => import("../views/PandaDetail.vue")      },      {        path:"/dog-detail",        name:"dog-detail",        component:() => import("../views/DogDetail.vue")      }    ]  }]const router = createRouter({  history: createWebHistory(import.meta.env.BASE_URL),  routes})export default router

四、总结：通过嵌套路由实现，应该可以明显的感受到Blazor和Vue的路由和布局差异：

Blazor是一个向上的过程，通过指定母版页，来确定母子嵌套关系。而Vue是一个向下的过程，通过指定子页面，来确定母子嵌套关系。
Blazor的布局构件，包括了@page、@layout、@inherits LayoutComponentBase、@body。而Vue，就一个router-view，然后就是在路由配置文件（Router/index.js）中进行配置。它们的区别和路由一样，Blazor分散到各个组件中，而Vue集中到路由配置文件中。

关键词：可以使用文件结构