Vue3从入门到实战：路由知识点

淩亂°似流年 2024-04-26 01:45 8阅读 0赞

本人在B站上关于vue3的**尚硅谷**的课程，以下是整理一些笔记。

### 1.两个知识点 ###

**1.路由组件通常存放在`pages` 或 `views`文件夹，一般组件通常存放在`components`文件夹。**

组件可以分为：

**1. 一般组件：**亲手写标签出来的

**2. 路由组件：**靠路由的规则渲染出来的

> 比如：
> 
>     routes:[//一个个的路由规则 
>             {
>                  path:'/home',
>                  component:Home
>             },
>             {
>                 path:'/about',
>                 component:About
>            },
>            {
>                  path:'/news',
>                  component:News
>             },
>     
>         ]

**遵循vue中的规则：**

**一般组件放在components文件夹**中，**路由组件放在`pages` 或 `views`文件夹**。

![841cbdab417342b6af2579ff26d2edaa.png][]

--------------------

**2.通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。**

比如我在路由组件About中**使用生命周期钩子来输出日志信息来**观察展示区是如何"消失的"

<template>
        <div class="about">
          <h2>大家好，欢迎来到小李同学的博客</h2>
        </div>
      </template>
      
      <script setup lang="ts" name="About">
        import {onMounted,onUnmounted} from 'vue'
      
        onMounted(()=>{
          console.log('About组件挂载了')
        })
        onUnmounted(()=>{
          console.log('About组件卸载了')
        })
      </script>
      
      <style scoped>
      .about {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        color: rgb(85, 84, 84);
        font-size: 18px;
      }
      </style>

![1324a27529bf410a97e6966d1346472d.png][]

![76c94fc23def440ebc18f84660a73039.png][]

![2d739b255e234c77ba180e7b24ec5786.png][]

### 2.路由器工作模式 ###

**1.H`istory`模式：**就像你在浏览器中打开一个新的网页一样。当你在应用程序中切换页面时，URL会更新，但页面不会重新加载。这样的URL看起来更加友好和自然，就像传统的网页链接一样。

比如：我现在写的博客的网址也是

![d2d308257d3c48b980aa3b29ea1b4463.png][]

**优点：**`URL`更加美观，不带有`#`，更接近传统的网站`URL`。

**缺点：**后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。

**2.Hash模式：**就像你在一个长网页中滚动到不同的章节。当你在应用程序中切换页面时，URL会在`#`符号后面加上一段标识，但浏览器不会发送请求到服务器。这样的URL看起来有点奇怪，但它对于一些特殊的环境（比如旧版浏览器）是有效的。

比如：这段代码的使用

//创建一个路由器并暴露出去
    
    //第一步：引入creatRouter
    import{createRouter,createWebHistory,createWebHashHistory} from'vue-router'
    //引入一个一个可能要呈现的组件
    import Home from '@/pages/Home.vue'
    import About from '@/pages/About.vue'
    import News from '@/pages/News.vue'
    
    
    
    //第二步：创建路由器
    
    const router =createRouter({
        history:createWebHashHistory(),//路由器的Hash工作模式
        routes:[//一个个的路由规则 
            {
                 path:'/home',
                 component:Home
            },
            {
                path:'/about',
                component:About
           },
           {
                 path:'/news',
                 component:News
            },
    
        ]
    })
    
    export default router//定义好后暴露出去router

![e092d163f86d44519cf6e38fe83abbdc.png][]

**优点：**兼容性更好，因为不需要服务器端处理路径。

**缺点：**`URL`带有`#`不太美观，且在`SEO`优化方面相对较差。

**两者的应用场景：**

如果你的应用程序主要在现代浏览器中运行，并且你希望URL看起来更加友好和自然，那么可以选择使用history模式。如果你需要在旧版浏览器中兼容，或者你的应用程序是一个单页应用（SPA），可以选择使用hash模式。

--------------------

### 3.to的两者写法 ###

在用于生成导航链接的标签`<router-link>`组件中**to****的两种常见使用方式，分别是字符串写法和对象写法。**

<template>
       <div class = 'app'>
          
          <Header/>
          
          <div class = 'navigate'>
             <RouterLink to = '/home'active-class="active" >首页</RouterLink>
             <RouterLink to = '/news'active-class="active" >新闻</RouterLink>
             <RouterLink to = '/about'active-class="active " >关于</RouterLink>
          </div>
          
          <div class = 'main-content'>
                <RouterView></RouterView>
          </div>
       </div>
      
    </template>
    
    <script lang="ts" setup name = "App">
    
    import { RouterView,RouterLink} from 'vue-router'; 
    import Header from './components/Header.vue'
    
    </script>
    <style>
        /* App */
      .navigate {
        display: flex;
        justify-content: space-around;
        margin: 0 100px;
      }
      
      .navigate a {
        display: block;
        text-align: center;
        width: 90px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        background-color: gray;
        text-decoration: none;
        color: white;
        font-size: 18px;
        letter-spacing: 5px;
      }
      .navigate a.active {
        background-color: #64967E;
        color: #ffc268;
        font-weight: 900;
        text-shadow: 0 0 1px black;
        font-family: 微软雅黑;
      }
      .main-content {
        margin: 0 auto;
        margin-top: 30px;
        border-radius: 10px;
        width: 90%;
        height: 400px;
        border: 1px solid;
      }
    </style>

**第一种：to的字符串写法**

![23bda5b0633a4b71b65504353d803768.png][]

**第二种：to的对象写法**

![d9f3d017447e4677bc1c1194b5607687.png][]

**两者的区别：**

使用字符串写法时，你可以直接将目标路由的路径作为字符串传递给`to`属性，例如`to="/home"`。

使用对象写法时，你可以通过一个对象来指定目标路由的各种属性，例如`{ path: '/home' }`。除了`path`属性，你还可以在对象中指定其他路由属性，如`name`、`params`、`query`等，以满足更复杂的路由导航需求。

### 4.命名路由 ###

作用：可以简化路由跳转及传参。

routes:[
      {
        name:'zhuye',
        path:'/home',
        component:Home
      },
      {
        name:'xinwen',
        path:'/news',
        component:News,
      },
      {
        name:'guanyu',
        path:'/about',
        component:About
      }

**跳转路由：**

<router-link to="/news/detail">跳转</router-link>

<router-link :to="{name:'guanyu'}">跳转</router-link>

--------------------

### 5.嵌套路由 ###

我们在关于新闻的组件中可以再嵌套一个子路由，用来展示不同新闻的不同详情。

**此时，新闻的标题成为导航区，点击后详情出现展示区内。**

![02825681f5ad4ac38c1d20cd45c8dde4.png][]

**下面是嵌套路由的步骤：**

**1.编写`News`的子路由：`Detail.vue组件`**

![3842f3c23e514762a11132a174e9f4a0.png][]

代码如下：

<template>
        <ul class="news-list">
          <li>编号:xxx</li>
          <li>标题:xxx</li>
          <li>内容:xxx</li>
        </ul>
      </template>
      
      <script setup lang="ts" name="About">
      
      </script>
      
      <style scoped>
        .news-list {
          list-style: none;
          padding-left: 20px;
        }
      
        .news-list>li {
          line-height: 30px;
        }
      </style>

**2.在index.ts文件配置路由规则，使用`children`配置项：**

![78ed074b09514e56ab81dcd0c3c088c6.png][]

**代码如下：**

// 创建一个路由器，并暴露出去
    
    // 第一步：引入createRouter
    import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'
    // 引入一个一个可能要呈现组件
    import Home from '@/pages/Home.vue'
    import News from '@/pages/News.vue'
    import About from '@/pages/About.vue'
    import Detail from '@/pages/Detail.vue'
    
    // 第二步：创建路由器
    const router = createRouter({
      history:createWebHistory(), //路由器的工作模式（稍后讲解）
      routes:[ //一个一个的路由规则
        {
          name:'zhuye',
          path:'/home',
          component:Home
        },
        {
          name:'xinwen',
          path:'/news',
          component:News,
          children:[
            {
              path:'detail',
              component:Detail
            }
          ]
        },
        {
          name:'guanyu',
          path:'/about',
          component:About
        },
      ]
    })
    
    // 暴露出去router
    export default router

**3.在关于新闻的"News"组件添加子路**

**注意：**

在新闻的导航区里面，再写入展示区div

![75c40b7b379e47cda68edb1ee6eab426.png][]

代码如下：

<template>
      <div class="news">
        
        <ul>
          <li v-for="news in newsList" :key="news.id">
            <RouterLink to="/news/detail">{
       {news.title}}</RouterLink>
          </li>
        </ul>
        
        <div class="news-content">
          <RouterView></RouterView>
        </div>
      </div>
    </template>
    
    <script setup lang="ts" name="News">
      import {reactive} from 'vue'
      import {RouterView,RouterLink} from 'vue-router'
    
      const newsList = reactive([
        {id:'title01',title:'很好的抗癌食物',content:'西篮花'},
        {id:'title02',title:'如何一夜暴富',content:'学IT'},
        {id:'title03',title:'震惊，万万没想到',content:'明天是周一'},
        {id:'title04',title:'好消息！好消息！',content:'快过年了'}
      ])
    
    </script>
    
    <style scoped>
    /* 新闻 */
    .news {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      height: 100%;
    }
    .news ul {
      margin-top: 30px;
      list-style: none;
      padding-left: 10px;
    }
    .news li>a {
      font-size: 18px;
      line-height: 40px;
      text-decoration: none;
      color: #64967E;
      text-shadow: 0 0 1px rgb(0, 84, 0);
    }
    .news-content {
      width: 70%;
      height: 90%;
      border: 1px solid;
      margin-top: 20px;
      border-radius: 10px;
    }
    </style>

**展示：**

![399d68d3a920456b97d2651dd886bcae.png][]

[841cbdab417342b6af2579ff26d2edaa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/139bd580bc4349d6bf899c9800d2cf62.png
[1324a27529bf410a97e6966d1346472d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5be9a9674a954158ad6920946771a850.png
[76c94fc23def440ebc18f84660a73039.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/db10cb33761944f5b2f0d533c2c780c9.png
[2d739b255e234c77ba180e7b24ec5786.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a3571906c7a7496ea5580234ae226c2a.png
[d2d308257d3c48b980aa3b29ea1b4463.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3893e5400e0c402ab01738dc8025889f.png
[e092d163f86d44519cf6e38fe83abbdc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/dbe1b4164f8b4a948e5bdef329a74815.png
[23bda5b0633a4b71b65504353d803768.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4a15d7a3dd8b400393d9cd895dcdca7b.png
[d9f3d017447e4677bc1c1194b5607687.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/781d4557c41d482e8794b5138cf92286.png
[02825681f5ad4ac38c1d20cd45c8dde4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4269fd7ed954440e8273c6569d22bc55.png
[3842f3c23e514762a11132a174e9f4a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d056bb0117584a3b935e406eeb5bc8f4.png
[78ed074b09514e56ab81dcd0c3c088c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/01dd75dd735c4333942902853bd10df2.png
[75c40b7b379e47cda68edb1ee6eab426.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/56517cb80a5644bebde9895ce2b4aab1.png
[399d68d3a920456b97d2651dd886bcae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/bbb156fe50474ee4aff2be37f5b9cafd.png