前言

在Web開(kāi)發(fā)中，嵌套路由是一種常見(jiàn)的布局設(shè)計(jì)模式，它允許開(kāi)發(fā)者構(gòu)建具有層次結(jié)構(gòu)的頁(yè)面，從而提供更豐富、更直觀的用戶(hù)體驗(yàn)。使用嵌套路由，開(kāi)發(fā)者可以在不同的頁(yè)面區(qū)域展示不同的內(nèi)容，同時(shí)保持應(yīng)用程序的整潔和可維護(hù)性。

一、嵌套路由方式重新設(shè)計(jì)布局

這幾天學(xué)習(xí)完路由可以解決之前遇到的一個(gè)問(wèn)題了。
之前簡(jiǎn)單設(shè)計(jì)了一下布局，發(fā)現(xiàn)了個(gè)問(wèn)題，做404頁(yè)面時(shí)候：

image.png

404頁(yè)面應(yīng)該是單獨(dú)的而不應(yīng)該在路由里面，所以整個(gè)布局可以使用嵌套路由設(shè)計(jì)一下，各個(gè)文件改動(dòng)如下：

先新建一個(gè)layout頁(yè)面，把之前頁(yè)面的布局挪到這里：

image.png

<template >

    <v-app>
    <Navigation app="false"></Navigation>

    <v-main>
        <AppBar></AppBar>
        <router-view v-slot="{ Component }" >
          <transition name="bounce" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
    </v-main>

  </v-app>
  </template>

路由配置：

 {
        path:'/',
        component:Layout,
        redirect: 'home',
        children: [
          {
            path: 'home',
            component: () => import('@/views/Home.vue'),
            name: 'home',
            meta: { title: '首頁(yè)'}
          }
        ]
    }

App.vue變成這樣：

<template>
    <router-view v-slot="{ Component }">
       <transition name="bounce" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
</template>

二、使用嵌套路由

Home.vue(之前學(xué)習(xí)的代碼注釋保留供以后復(fù)習(xí)):

<template>
    <v-app>

        <!-- <Navigation app="false"></Navigation> -->
        <!-- image="https://picsum.photos/1920/1080?random"  -->

        <!-- <AppBar>111</AppBar> -->

        <v-main>
            <div style="font-size:100px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:22%; " >首頁(yè)</div>
            <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:40%; " ><RouterLink to="/vlist/123" >to list</RouterLink> </div>
            <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:60%; " ><router-link to="/checkbox" >to checkbox</router-link> </div>
            <!-- <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " ><router-link to="/hellosh" >to hellosh</router-link> </div> -->

            <!-- router學(xué)習(xí)query -->
            <!-- <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " >
                <router-link :to=
                "{
                    path:'/studyRoute',
                    query:{
                        id:'12345',
                        name:'shanhua'
                    }
                }">
                    to studyRoute
                </router-link> 
            </div> -->
            <!-- <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " >
                <router-link to="/studyRoute?id=123456&name=shanhua" >
                    to studyRoute
                </router-link> 
            </div> -->

            <!-- router學(xué)習(xí)params -->
            <!-- <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " >
                <router-link to="/studyRoute/123456/shanhua" >
                    to studyRoute
                </router-link> 
            </div> -->

            <div style="font-size:80px; color:black; position:fixed;box-shadow: 0px 0px 0px #ccc; left:50%;top:80%; " >
                <router-link :to=
                "{
                    name:'studyRoute',
                    params:{
                        id:'12345',
                        name:'shanhua'
                    }
                }">
                    to studyRoute
                </router-link> 
            </div>
            <!-- <v-container>
                <v-row>
                    <v-col v-for="n in 3" :key="n" class="d-flex child-flex" cols="2">
                        <v-img :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
                            :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`" aspect-ratio="1" cover
                            class="bg-grey-lighten-2">
                            <template v-slot:placeholder>
                                <v-row class="fill-height ma-0" align="center" justify="center">
                                    <v-progress-circular indeterminate color="grey-lighten-5"></v-progress-circular>
                                </v-row>
                            </template>
                        </v-img>
                    </v-col>
                </v-row>
            </v-container> -->
        </v-main>
    </v-app>
</template>

<script setup lang='ts' name="Home">

import Navigation from "@/components/navigation/Navigation.vue"
import AppBar from "@/components/navigation/AppBar.vue"
</script>

<style lang='less' scoped></style>

運(yùn)行效果：

image.png

隨便輸入個(gè)匹配不到的路由跳轉(zhuǎn)到404頁(yè)面：

image.png

如果其他界面也需要側(cè)邊欄和導(dǎo)航欄就這樣配置一下路由：

 {
    path:'/hellosh',
    component:Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/HelloSH.vue'),
        name: 'hellosh',
        meta: { title: 'hello'}
      }
    ]
   }

image.png

總結(jié)

嵌套路由的核心思想是將頁(yè)面分為幾個(gè)部分，每個(gè)部分都有自己的路由配置。這樣，當(dāng)用戶(hù)導(dǎo)航到特定頁(yè)面時(shí)，只有相關(guān)的部分會(huì)重新加載，而不是整個(gè)頁(yè)面。這種方法可以提高應(yīng)用程序的性能，并減少不必要的網(wǎng)絡(luò)流量。

在實(shí)現(xiàn)嵌套路由時(shí)，可以使用現(xiàn)代前端框架和庫(kù)，如React、Vue.js或Angular，它們都提供了對(duì)嵌套路由的原生支持。例如，在React中，可以使用React Router庫(kù)來(lái)定義嵌套路由，而在Vue.js中，可以使用Vue Router來(lái)實(shí)現(xiàn)相同的功能。

生活就像一杯茶，不會(huì)苦一輩子，但總會(huì)苦一陣子。