一期我們說到了三種解決方案，這期再給大家分享兩種方法。

先設定html和css樣式

方法一：transform（注意兼容性）

方法二：背下來就行

這兩種也很常用，就是要注意兼容性的問題。

學前端，關注銳盈課堂，私信我了解更多！

ue3 嵌套路由的使用和 Vue2 相差不大，主要的區別是 Vue3 的路由實例化使用了 createApp() 方法，所以實例化路由時需要傳入根組件。另外，Vue3 的路由對象除了包含 Vue2 中的導航守衛、導航鉤子和解析守衛等功能外，還新增了 meta prop 和 route prop。

在使用嵌套路由時，建議將路由按照功能模塊進行分層，每一層代表一個主要的功能塊，每個層級下的路由數量不要過多，一般建議不要超過 10 個，層級也不要超過 5 層。同時，根據實際業務需求，可以適當調整路由層級和數量，以達到更好的管理和使用效果。

route文件下 index.ts文件代碼：

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from "vue-router";
// createWebHashHistory,createWebHistory

const routes: RouteRecordRaw[]=[
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'Home',
    component: ()=> import('@/views/Home/index.vue'),
    meta: {
      title: 'Home Page',
      roles: ['admin', 'admin1']
    },
    children: [
      {
        path: 'lx',
        name: 'Lx',
        component: ()=> import('@/views/Home/Lx.vue'),
        // 也可以使用props傳參方式接收傳來的參數
        props: (propsRouter)=> {
          // console.log('props >router', propsRouter)
          // 可以return query 也可以return params支持兩種傳參方式
          return propsRouter.query
        },
        // 多級嵌套 建議用query傳參
        children: [
          {
            path: 'childA',
            name: 'ChildA',
            component: ()=> import('@/views/Home/ChildA.vue'),
          },
        ]
      },
      {
        path: 'lxb/:id/:title', // 提前定義params參數（可以定義多個）
        name: 'Lxb',
        component: ()=> import('@/views/Home/Lxb.vue'),
      },
    ]
  },
]

export const router=createRouter({
  // 路由的history模式，共有三種模式，
  // createWebHistory、createWebHashHistory、createMemoryHistory
  history: createWebHashHistory(),// history: createWebHistory(),
  // 路由配置
  routes,
  // 是否嚴格匹配路由
  strict: true,
  // 路由跳轉完成后，頁面滾動行為
  scrollBehavior: ()=> ({ left: 0, top: 0 }),
})

main.ts文件代碼：

import { router } from './route/index'
import { createApp } from 'vue'

const app=createApp(App)
app.use(router).mount('#app')

App.vue文件代碼：

<template>
  <router-view />
</template>

<script>
import { defineComponent } from 'vue'
 // vue3.0版本語法
export default defineComponent({
  name: 'App',
})
</script>

views文件夾下的Home文件夾下的index.vue文件代碼：

<template>
  <div class="home">
    <h2>首頁{{ title }}</h2>
    <!-- 模擬有權限時顯示 -->
    <div v-if="roles.includes(role)">
      <h2>嵌套路由</h2>
      <router-link to="/home/lx">push跳轉到/home/lx頁面</router-link>
      <br>
      <!-- 加了/就要寫全 /home/lxb -->
      <router-link replace to="/home/lxb/id:2/title:102">push跳轉到/home/lxb頁面</router-link>

      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'Home',
  setup() {
    const router=useRouter()
    const route: any=useRoute()

    const state=reactive({
      title: '',
      role: '', // 我的當前角色
      roles: [''],
      routerGo: (path)=> {
        if (path==='lx') {
          // query傳參可以用path 也可以用name: Lx
          router.push({
            path: path,
            query: {
              title: '101',
              id: 1
            }
          })
          // router.replace
        } else {
          // params傳參只能用name
          router.replace({
            // path: path + '/id:2/title:102',
            name: 'Lxb',
            params: {
              title: '102',
              id: 2
            }
          })
        }
      },
    })
    onMounted(()=> {
      console.log('/home', route)
      state.title=route.meta.title
      state.roles=route.meta.roles
      // 模擬一個接口
      setTimeout(()=> {
        const res={
          code: 200,
          data: {
            token: '123456',
            userName: '吳彥祖',
            role: 'admin'
          }
        }
        state.role=res.data.role
      }, 0)
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="less" scoped>
.home {
  color: pink;
  font-size: 14px;
}
</style>

views文件夾下的Home文件夾下的Lxb.vue文件代碼：

<template>
  <div style="font-size: 14px;">
    <h2>我是練習b{{ route?.params?.title }}頁面</h2>
    <div>id:{{ route?.params?.id }}</div>
    <button @click="routerGoBack">返回首頁</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// vue3.0語法
export default defineComponent({
  name: 'Lxb',
  setup() {
    const route=useRoute()
    const router=useRouter()
    const state: any=reactive({
      routerGoBack: ()=> {
        router.replace('/home')
        // 由replace跳轉進來的不可以使用router.go(-1) 路由棧是空的》回不到上一個路由
      },
    })

    onMounted(()=> {
      console.log(route)
    })

    return {
      route,
      ...toRefs(state)
    }
  },
})
</script>

views文件夾下的Home文件夾下的Lx.vue文件代碼：

<template>
  <div style="font-size: 14px;">
    <h2>我是練習{{ title }}頁面</h2>
    <div>id:{{ id }}</div>
    <div>props: {{ props }}</div>
    <button @click="routerGoBack">返回上一頁</button>
    <br>
    <button @click="routerGo('/home/lx/childA')">去子路由childA</button>
    <!-- <router-view></router-view> -->
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// vue3.0語法
export default defineComponent({
  name: 'Lx',
  props: {
    id: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
  },
  setup(props) {
    const route=useRoute()
    const router=useRouter()
    const state: any=reactive({
      id: '',
      title: '',
      routerGoBack: ()=> {
        router.go(-1) // go(-1)回到上一個路由
        // 也可以用router.replace('/home')跳回指定頁
      },
      routerGo: (path)=> {
        router.push(path)
      }
    })

    onMounted(()=> {
      console.log('lx route', route)
      console.log('lx props', props)
      if (route.query) {
        state.id=route.query.id
        state.title=route.query.title
      }
    })

    return {
      props,
      ...toRefs(state)
    }
  },
})
</script>

views文件夾下的Home文件夾下的ChildA.vue文件代碼：

<template>
  <div style="font-size: 14px;background: skyblue;">
    <h3>我是ChildA組件</h3>
    <h3>route.query:{{ route.query }}</h3>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// vue3.0語法
export default defineComponent({
  name: 'ChildA',
  setup() {
    const router=useRouter()
    const route=useRoute()
    function goBack() {
      router.go(-1)
    }
    onMounted(()=> {
      console.log(route)
    })
    // 可以在頁面銷毀前清除事件
    // onUnmounted(()=> {
    //   proxy.$mittBus.off('mittUserA')
    // })
    return {
      route, goBack
    }
  },
})
</script>

初始頁面效果：

先點擊push跳轉到/home/lxb頁面>（嵌套一層的路由）頁面效果：

嵌套一層的路由從原本/home跳入了/home/lxb 子路由頁面，點擊回到首頁。

再點擊push跳轉到/home/lx頁面>（嵌套多層的路由）頁面效果：

先去到了第一層/home/lx子路由頁面，

再點擊去子路由childA按鈕>頁面效果：

進到了嵌套的第二層/home/lx/childA子路由頁面

點擊可返回上一頁/home/lx 再點擊可回到/home首頁。

歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。

學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。

在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。

此外，我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。

我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。

如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！

#前端#

級元素與內聯元素的概念與區別

在HTML中，大多數元素都被定義為塊級元素或內聯元素。

塊級元素通常會獨立成行，而內聯元素會并排顯示。

在我們學過的元素中，

塊級元素如：<h> <p> <table>這些。

內聯元素如<td><a><img>

下面我們通過練習來直觀看看他們的區別。

塊級元素展示，代碼如下：

<body>
  <h1>第一個網頁</h1><hr><h2>表格元素</h2><hr>
  <p>塊級元素與內聯元素</p>
  <p>零基礎自學網頁制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span="1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border="1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如圖：

內聯元素展示如下

示例代碼：這段代碼被我放在了</table>后面。

<a href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰斗機</a>
<img src="img/戰斗機/image3.jpg" width="200px"/>

效果如圖：

其中，<img>標簽中的width屬性規定了圖片的寬度為200px，也就是200像素。

HTML中，如果只對圖片的寬或高進行數值指定，那么未指定的數值會隨著指定數值進行等比例縮放！

熟知html元素是塊級還是內聯對以后進行頁面布局有一定的指導意義。

<div>與<span>標簽

為了方便開發者對頁面內容進行布局和調整，html開發者為html加入了專門的區塊元素<div></div>。

<div></div>是一個塊級元素，大家可以把它理解為一個容器，它本身是不會顯示在頁面上的。

比如這個！

如果拋開畫面內容，我們看到的是一堆對畫面進行分割的方格子。像這樣

<div></div>元素的作用就是對頁面進行了這樣的分割。

實際上我們的頁面布局都是基于這樣思路進行分割的，只是頁面上不會像漫畫一樣顯示外邊框而已。例如：

強制為其添加邊框分割：

大家看明白了嗎？<div></div>就是用來對頁面進行分割劃區域的。

通過給<div>標簽設置不同的id屬性，可以在css文件中對不同<div>區塊中的所有信息進行統一調整樣式的操作。

這是對塊級元素整體改變樣式的方法。

但是，如果我們想對一個塊級元素中的不同文字或圖片這些內聯元素進行單獨操作怎么做呢？

html開發者為我們提供了<span></span>這樣的內聯標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作，我們可以這樣寫：

<p>我有一個<span>夢想</span></p>

通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。

今天的內容結束了，下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作