Vue学习：路由

忘是亡心i 2023-10-04 19:53 47阅读 0赞

### 2. 路由 ###

#### 2.1 前端路由的发展历程 ####

##### 2.1.1 认识前端路由 #####

路由其实是网络工程中的一个术语：  
在架构一个网络时，非常重要的两个设备就是**路由器和交换机**。  
![在这里插入图片描述][6bb5bce31cf74baba340b247464867ee.png]

当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器：  
事实上，**路由器主要维护的是一个映射表**；映射表会决定数据的流向；

> 前端路由: 就是一组key-value的映射(通俗的讲:就是一个url与组件/function的映射)
> 
> 前端路由器: 管理多个路由的,就称为路由器  
> ![在这里插入图片描述][93ba7badada047cd8c5c87d26a00f0bf.png]

##### 2.1.2 路由的发展历程 #####

路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：

*  后端路由阶段；
 *  前后端分离阶段；
 *  单页面富应用（SPA）；

**阶段一: 后端路由阶段:**

>  *  早期的网站开发整个HTML页面是由服务器来渲染的.
>  *  服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
>  *  但是, 一个网站, 这么多页面服务器如何处理呢?
>  *  一个页面有自己对应的网址, 也就是URL；
>  *  URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理；
>  *  Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
>  *  上面的这种操作, 就是后端路由：
>  *  当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端.
>  *  这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.
>  *  后端路由的缺点:
>  *  一种情况是整个页面的模块由后端人员来编写和维护的；
>  *  另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码；
>  *  而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情；

**阶段二: 前后端分离阶段**

>  *  前端渲染的理解：
>  *  每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染；
>  *  需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件；
>  *  同时可以看到，和之前的后端路由不同，这时后端只是负责提供API了；
>  *  前后端分离阶段：
>  *  随着Ajax的出现, 有了前后端分离的开发模式；
>  *  后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中；
>  *  这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上；
>  *  并且当移动端(iOS/Android)出现后，后端不需要进行任何处理，依然使用之前的一套API即可；

**阶段三: 单页面富应用阶段:**

>  *  SPA(single page web application): 单页面富应用, 整个应用只有一个完整的页面.
>  *  其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
>  *  也就是前端来维护一套路由规则.
>  *  前端路由的核心是什么呢？**改变URL，但是页面不进行整体的刷新。**

#### 2.2 路由的基本使用 ####

**使用步骤:**

1.  安装vue-router插件
    
        npm i vue-router
2.  在src目录下创建router目录,再在router目录下创建一个index.js(该文件用于创建整个应用的路由器)

![1ba2cc8380cf476ba030dcb342642a82.png][]

1.  在main.js文件中使用vue-router
    
        //引入vue-router
        import router from './router'
        
        //使用VueRouter
        createApp(App).use(router).mount('#app')
2.  在router目录下的index.js文件创建路由器对象,并进行相关的路由规则的设置

//引入函数
    import {
         createRouter,createWebHistory } from 'vue-router'
    //引入组件
    import Home from '../components/Home'
    import About from '../components/About'
    const routes = [
        //配置路由规则  
        {
           
            path:'/home',
            component:Home
        },
        {
           
            path:'/about',
            component:About
        },
    ]
    //创建路由器实例并传递 `routes` 配置
    const router = createRouter({
        
        history: createWebHistory(process.env.BASE_URL),
        routes
      })
    
      //导出router
    export default router

1.  编写Home和About组件

**About.vue**

<template>
        <div>
            <p class="lead">About内容...</p>
        </div>
    </template>
    
    <script>
    export default {
          
        name: 'About',
    };
    </script>

**Home.vue**

<template>
        <div>
            <p class="lead">Home内容...</p>
        </div>
    </template>
    
    <script>
    export default {
          
        name: 'Home',
    };
    </script>

1.  编写App.vue
    
        <template>
          <nav class="nav">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
              </ul>
          </nav>
          <div style="margin-top: 60px;">
             组件内容展示区域
          </div>
        </template>
        
        <script>
        import Home from './components/Home.vue'
        import About from './components/About.vue'
        export default {
                
          name: 'App',
          data() {
                
            return {
                
            };
          },
          components: {
                
            Home,
            About,
          },
        };
        </script>
        <style lang="css" scoped>
          li{
                
            list-style-type: none;
          }
          .nav{
                
            height: 50px;
            line-height: 50px;
            background-color: #999;
          }
          .nav ul{
                
            display: flex;
          }
          .nav ul li{
                
             margin-right: 20px;
             display: flex;
          }
         .active{
                
              background-color : skyblue;
              padding:0px 10px;
              color: #FFF;
           }
        </style>
2.  使用`router-link`替换App.vue中的`<a>`标签
    
        <li class="active"><router-link to="/home">Home</router-link></li>
         <li><router-link to="/about">About</router-link></li>

![在这里插入图片描述][51cb03e3b7b040979307bd44cb095a0c.png]

1.  使用`router-view`替换组件内容展示区  
    ![在这里插入图片描述][41b770cd2ed2425d8037dfa0d2aa11b5.png]
2.  测试  
    ![在这里插入图片描述][83d18dd1341a47b49337ecd3c8a2c459.png]

我们发现.当我们点击不同的导航,但是导航的样式没有跟着变,那是因为我们把active类样式写死在Home上,如果想做到,点击不同的导航,样式也跟着切换,我们可以在`<router-link>`标签上添加active-class=‘类名’  
![在这里插入图片描述][f2e020aeaa0348c2bcab98837fa471b6.png]

如果我们的导航很多,那我们就需要在每个`<router-link>`标签上添加active-class='类名’很繁琐,其实我们也可以在创建router对象,进行设置`linkActiveClass`属性,而需要在每个`<router-link>`设置:

![在这里插入图片描述][9b7afa5a668d400a93e521ecd5bff6f5.png]

> router-link的其他属性:
> 
>  *  to属性：  
>     是一个字符串，或者是一个对象
>  *  replace属性：  
>     设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()\[**默认模式**\]；
>  *  active-class属性：  
>     设置激活a元素后应用的class，默认是router-link-active
>  *  exact-active-class属性：  
>     链接精准激活时，应用于渲染的 的 class，默认是router-link-exact-active；

##### 路由的默认路径 #####

上面的案例还有一个不太好的实现:默认情况下, 进入网站的首页, 我们希望渲染首页的内容,但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以,如何可以让路径默认跳到到首页, 并且渲染首页组件呢?

我们在routes中又配置了一个映射：
    
    -   path配置的是根路径: /			
    
    - redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了			
    
      ```javascript
       {   
           //路由默认路径
           path:'/',
               redirect:'/home'
       }
      ```
    
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HdNQQYP9-1667816366247)(assets/image-20221029204811975.png)]

> **注意:**
> 
> 1.  在实际开发中,我们会把组件分为两类, 一类是路由组件,一类是普通组件, 我们会把普通组件放在components目录下, 而路由组件则放在views或者pages目录下
> 2.  通过调用 `app.use(router)`，我们可以在任意组件中以 `this.$router` 的形式访问它，并且以 `this.$route` 的形式访问当前路由。`this.$router` 与直接使用通过 `createRouter` 创建的 `router` 实例完全相同。

#### 2.3 嵌套路由 ####

目前我们匹配的Home、About等都属于第一层路由，我们在它们之间可以来回进行切换。但是呢，我们Home页面本身，也可能会在多个组件之间来回切换：比如Home中包括Product、Ad，它们可以在Home内部来回切换；这个时候我们就需要使用嵌套路由，在Home中也使用 router-view 来占位之后需要渲染的组件。

**HomeProduct.vue**

<template>
        <ul>
            <li v-for=" p in productList">{
       {p}}</li>
        </ul>
    </template>
    
    <script>
    export default {
          
        name: 'HomeProduct',
    
        data() {
          
            return {
          
                productList:["小米手机","华为电脑","康佳相机"],
    
            };
        },
    };
    </script>
    
    <style lang="css" scoped>
        
    </style>

**HomeAd.vue**

<template>
        <ul>
            <li v-for=" ad in adList">{
       {ad}}</li>
        </ul>
    </template>
    
    <script>
    export default {
          
        name: 'HomeAd',
    
        data() {
          
            return {
          
                adList:["全场商品打5折","为了回馈老客户,让利大行动","你还在等什么!心动不如行动"],
    
            };
        },
    };
    </script>
    
    <style lang="css" scoped>
    
    </style>

**Home.vue**

<template>
        <h2>Home内容...</h2>
        <nav class="nav">
            <ul>
                <li ><router-link   to="/home/product"  >Product</router-link></li>
                <li ><router-link  to="/home/ad" >Ad</router-link></li> 
            </ul>
        </nav>
        <div>
            <router-view></router-view>
        </div>
    </template>
    
    <script>
    export default {
          
        name: 'Home',
    
        data() {
          
            return {
          
                
            };
        },
        methods: {
          
            
        },
    };
    </script>
    
    <style lang="css" scoped>
        
    </style>

修改router/index.js

{
           
        path:'/home',
            component:Home,
                children:[
                    {
        
                        path:'',
                        component:HomeProduct
                    },
                    {
        
                        path:'product',
                        component:HomeProduct
                    },
                    {
        
                        path:'ad',
                        component:HomeAd
                    }
                ]
    },

![在这里插入图片描述][7404370b2fea4190b194174d1cbf7949.png]

> **注意:**
> 
> 1.  子级的path不需要加/

#### 2.4 路由懒加载 ####

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：这是因为component可以传入一个组件，也可以接收一个函数，该函数 需要放回一个Promise；  
而import函数就是返回一个Promise；  
![在这里插入图片描述][5c0d2dca0bfc4f9b8ca7c8fcf534d2a7.png]

#### 2.5 动态路由匹配 ####

##### 2.5.1 带参数的动态路由匹配 #####

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 `User` 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 ***路径参数***

**User.vue**

<template>
       <h2>用户:</h2>
    </template>
    
    <script>
    export default {
          
        name: 'User',
        data() {
          
            return {
          
                
            };
        },
    };
    </script>
    
    <style lang="css" scoped>
        
    </style>

配置路由:

{
         
        path: '/users/:id',
        component: ()=>import('../views/User') 
    },

现在像 `/users/johnny` 和 `/users/jolyne` 这样的 URL 都会映射到同一个路由。

**获取动态路由的值:**

**路径参数**用冒号 `:` 表示。当一个路由被匹配时，它的 *params* 的值将在每个组件中以 `this.$route.params` 的形式暴露出来。因此，我们可以通过更新 `User` 的模板来呈现当前的用户 ID：

<template>
       <h2>用户:{
       {$route.params.id}}</h2>
    </template>

>  *  在template中，直接通过`$route.params`获取值；  
>     ![在这里插入图片描述][3b6a531a898e4e3f840b53e9a5a5698b.png]
>  *  在created中，通过 `this.$route.params`获取值；
>  *  在setup中，我们要使用 vue-router库给我们提供的一个hook的useRoute；  
>     该Hook会返回一个Route对象，对象中保存着当前路由相关的值

你可以在同一个路由中设置有多个 *路径参数*，它们会映射到 `$route.params` 上的相应字段。例如：

<table> 
 <thead> 
  <tr> 
   <th>匹配模式</th> 
   <th>匹配路径</th> 
   <th>$route.params</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/users/:username</td> 
   <td>/users/eduardo</td> 
   <td><code>{ username: 'eduardo' }</code></td> 
  </tr> 
  <tr> 
   <td>/users/:username/posts/:postId</td> 
   <td>/users/eduardo/posts/123</td> 
   <td><code>{ username: 'eduardo', postId: '123' }</code></td> 
  </tr> 
 </tbody> 
</table>

> **注意:**
> 
> 使用 `$route` 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 `props` 配置来解除这种行为：
> 
> 我们可以将下面的代码
> 
> 替换成:

> 当 `props` 设置为 `true` 时，`route.params` 将被设置为组件的 props

##### 2.5.2 404 Not found 路由 #####

对于哪些没有匹配到的路由，我们通常会匹配到固定的某个页面。比如NotFound的错误页面中，这个时候我们可编写一个动态路由用于匹配所有的页面；

常规参数只匹配 url 片段之间的字符，用 `/` 分隔。如果我们想匹配**任意路径**，我们可以使用自定义的**路径参数**正则表达式，在 **路径参数**后面的括号中加入 正则表达式 :

// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
    {
         path: '/:pathMatch(.*)', 
      component: ()=>import('../views/NotFound') 
    },

我们可以通过 $route.params.pathMatch获取到传入的参数：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aSgJ2PKi-1667816366266)(assets/image-20221030103501207.png)\]

> **注意:**
> 
> 这里还有另外一种写法：
> 
>     {
>           path: '/:pathMatch(.*)*', 
>      component: ()=>import('../views/NotFound')
>     },
> 
> 在/:pathMatch(.\*)后面又加了一个 \*
> 
> 它们的区别在于解析的时候，是否解析 /：
> 
>  *  `path: '/:pathMatch(.*)'`写法
>  *  `path: '/:pathMatch(.*)*'`写法

#### 2.6 query方式的参数 ####

我们使用动态路由的方式可以传递数据, 但是我们也可以像url传递参数的方式,在to的后面使用?传递参数。

我们修改ad的路由,把广告的id和标题作为参数传递给HomeAd组件, 并在HomeAd组件展示.

**HomeAd.vue**

<template>
        <ul>
            <li v-for=" ad in adList">
                <router-link to="/home/ad/detail?id=ad.id&title=ad.title">{
       {ad.title}}</router-link>
            </li>
        </ul>
        <hr/>
        <router-view/>
    </template>
    
    <script>
    export default {
          
        name: 'HomeAd',
    
        data() {
          
            return {
          
                adList:[
                    {
          id:1,title:'全场商品打5折'},
                    {
          id:2,title:'为了回馈老客户,让利大行动'},
                    {
          id:3,title:'你还在等什么!心动不如行动'}
                ],
    
            };
        },
    };
    </script>
    
    <style lang="css" scoped>
    
    </style>

我们发现`<router-link to="/home/ad/detail?id=ad.id&title=ad.title">{ {ad.title}}</router-link>`使用?给组件传递的id和title数据。

接下来,我们创建一个AdDetail组件,用于展示

**AdDetial.vue**

<template>
        <div>
            <p>编号:{
       {$route.query.id}}</p>
            <p>标题:{
       {$route.query.title}}</p>
        </div>
    </template>
    
    <script>
    export default {
          
        name: 'AdDetial',
    
        data() {
          
            return {
          
                
            };
        },
        mounted(){
          
            //console.log(this.$route);
        }
    };
    </script>
    
    <style lang="scss" scoped>
    
    </style>

> 我们可以使用`this.$route`获取当前路由的配置  
> \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zCLEoWjU-1667816366276)(assets/image-20221030113537866.png)\]
> 
> 在template标签中可以使用`{ {$route.query.title}}`获取传递的参数

但是我们会发现,不管我们点击那个广告导航,AdDetail组件显示都是`ad.id`和`ad.title`

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ipsde6pa-1667816366277)(assets/image-20221030113746315.png)\]

为什么会是这样呢? 原来是我们的`<router-link to="/home/ad/detail?id=ad.id&title=ad.title">{ {ad.title}}</router-link>`使用的是to属性,所以双引号的只作为普通字符串. 那怎么把ad.id与ad.title作为一个变量呢?

我们可以使用模板字符串:

<router-link :to="`/home/ad/detail?id=${ad.id}&title=${ad.title}`">{
       {ad.title}}</router-link>

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcI0yw9X-1667816366278)(assets/image-20221030114134117.png)\]

虽然我们使用to的模板字符串的写法,进行传参,但是如果我们需要传递多个参数,那模板字符串的写法就很不美观,那我们可以使用to的对象写法:

<li v-for=" ad in adList">
                
                <router-link :to="{
                  path:'/home/ad/detail',
                  query:{
                    id:ad.id,
                    title:ad.title
                  }
                }">{
       {ad.title}}</router-link>
            </li>

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FBsiNNhG-1667816366283)(assets/image-20221030115012707.png)\]

我们可以关闭TypeScript的验证,然后重启vscode

#### 2.7 命名路由 ####

除了 `path` 之外，你还可以为任何路由提供 `name`。这有以下优点：

*  没有硬编码的 URL
 *  `params` 的自动编码/解码。
 *  防止你在 url 中出现打字错误。
 *  绕过路径排序（如显示一个）

要链接到一个命名的路由，可以向 `router-link` 组件的 `to` 属性传递一个对象：

> **注意:**
> 
> 如果使用params传递参数, 不能写path,只能写name

#### 2.8 编程式导航 ####

除了使用 `<router-link>` 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

##### 2.8.1 导航到不同的位置 #####

**在 Vue 实例中，你可以通过 `$router` 访问路由实例。因此你可以调用 `this.$router.push`。**

想要导航到不同的 URL，可以使用 `router.push` 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 `<router-link>` 时，内部会调用这个方法，所以点击 `<router-link :to="...">` 相当于调用 `router.push(...)` ：

<table> 
 <thead> 
  <tr> 
   <th>声明式</th> 
   <th>编程式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;router-link :to="..."&gt;</code></td> 
   <td><code>router.push(...)</code></td> 
  </tr> 
 </tbody> 
</table>

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
    router.push('/users/eduardo')
    
    // 带有路径的对象
    router.push({
         path: '/users/eduardo' })
    
    // 命名的路由，并加上参数，让路由建立 url
    router.push({
         name: 'user', params: {
         username: 'eduardo' } })
    
    // 带查询参数，结果是 /register?plan=private
    router.push({
         path: '/register', query: {
         plan: 'private' } })
    
    // 带 hash，结果是 /about#team
    router.push({
         path: '/about', hash: '#team' })

> **注意**：如果提供了 `path`，`params` 会被忽略，上述例子中的 `query` 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 `name` 或手写完整的带有参数的 `path` ：
> 
>     const username = 'eduardo'
>     // 我们可以手动建立 url，但我们必须自己处理编码
>     router.push(`/user/${
>            username}`) // -> /user/eduardo
>     // 同样
>     router.push({
>           path: `/user/${
>            username}` }) // -> /user/eduardo
>     // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
>     router.push({
>           name: 'user', params: {
>           username } }) // -> /user/eduardo
>     // `params` 不能与 `path` 一起使用
>     router.push({
>           path: '/user', params: {
>           username } }) // -> /user

##### 2.8.2 替换当前位置 #####

它的作用类似于 `router.push`，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

<table> 
 <thead> 
  <tr> 
   <th>声明式</th> 
   <th>编程式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;router-link :to="..." replace&gt;</code></td> 
   <td><code>router.replace(...)</code></td> 
  </tr> 
 </tbody> 
</table>

也可以直接在传递给 `router.push` 的 `routeLocation` 中增加一个属性 `replace: true` ：

router.push({
         path: '/home', replace: true })
    // 相当于
    router.replace({
         path: '/home' })

##### 2.8.3 页面的前进后退 #####

router的go方法

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 `window.history.go(n)`。

// 向前移动一条记录，与 router.forward() 相同
    router.go(1)
    
    // 返回一条记录，与 router.back() 相同
    router.go(-1)
    
    // 前进 3 条记录
    router.go(3)
    
    // 如果没有那么多记录，静默失败
    router.go(-100)
    router.go(100)

router也有back：  
通过调用 history.back() 回溯历史。相当于 router.go(-1)；

router也有forward：  
通过调用 history.forward() 在历史中前进。相当于 router.go(1)；

##### 2.8.4 动态管理路由的其他方法 #####

删除路由有以下三种方式：

方式一：添加一个name相同的路由；

方式二：通过removeRoute方法，传入路由的名称；

方式三：通过addRoute方法的返回值回调；

路由的其他方法补充:

*  router.hasRoute()：检查路由是否存在。
 *  router.getRoutes()：获取一个包含所有路由记录的数组。

#### 2.9 路由守卫 ####

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。路由守卫就是路由跳转过程中的一些钩子函数，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数。

所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你\*\*从哪里来（from）？要到哪里去(to)？然后保安再告诉你下一步该怎么做(next())？\*\*如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。

分类: 全局的，单个路由独享的，或者组件级的。

##### 2.9.1 全局守卫 #####

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查。

vue-router全局有三个守卫：

1.  router.beforeEach 全局前置守卫 进入路由之前
2.  router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
3.  router.afterEach 全局后置钩子 进入路由之后

###### 2.9.1.1 全局前置守卫 ######

你可以使用 `router.beforeEach` 注册一个全局前置守卫：

> `beforeEach` 它有两个参数：
> 
>  *  to：即将进入的路由Route对象；
>  *  from：即将离开的路由Route对象；
> 
> 它有返回值：
> 
>  *  false：取消当前导航；
>  *  不返回或者undefined：进行默认导航；
>  *  返回一个路由地址：
>  *  可以是一个string类型的路径；
>  *  可以是一个对象，对象中包含path、query、params等信息；
> 
> 可选的第三个参数：next（不推荐使用）
> 
>  *  在Vue2中我们是通过next函数来决定如何进行跳转的；
>  *  但是在Vue3中我们是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qOIaVKf5-1667816366295)(assets/image-20221031202544204.png)\]

比如我们完成一个功能，只有登录后才能访问home/product和home/ad,如果没有登录,只能访问home和about, 前端怎么知道用户是否登录呢? 比如我们在登录成功之后, 后台会产生一个唯一的字符串,这个字符串我们称为token, 并响应给客户端,客户端会把这个token保存在浏览器的本地存储对象:localStorage中.

我们首先创建一个登录页面,

<template>
        <div>
            <form action="/home" ref="loginForm">
                <label for="username">用户名:</label>
                <input id="username"  v-model="username"/>
                <hr/>
                <label for="pwd">密码:</label>
                <input id="pwd"  v-model="password" type="password"/>
                <hr/>
                <button type="button" @click="doLogin">登录</button>
            </form>
        </div>
    </template>
    
    <script>
    export default {
        
        name: 'Login',
    
        data() {
        
            return {
        
                username:'',
                password:''
            };
        },
    
        mounted() {
        
            
        },
    
        methods: {
        
            doLogin(){
        
                if(this.username==='admin' && this.password==='123'){
        
                    localStorage.setItem("token",this.username)
                    alert('登录成功!!!');
                    this.$refs.loginForm.submit();
                }else{
        
                    alert('登录失败!!!');
                    this.$refs.loginForm.reset();
                }
            }
        },
    };
    </script>
    
    <style lang="scss" scoped>
    
    </style>

并在router/index.js配置一下:

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvy5x7z4-1667816366296)(assets/image-20221101062849597.png)\]

在App.vue的导航我们添加一个登录的按钮

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R4OfAHW2-1667816366301)(assets/image-20221101062936603.png)\]

并实现跳转到Login.vue

toLogin(){
        
          this.$router.push({
        
            path:'/login'
          });
        }

现在我们使用全局前置守卫,来实现登录的访问控制, 在router/index.js文件中创建一个前置路由守卫:

//全局的前置路由守卫  --- 初始化的时候被调用,每次路由切换之前被调用
    router.beforeEach((to,from) =>{
        
        if(to.path === '/home/product' || to.path === '/home/ad'){
        
            if(!localStorage.getItem("token")){
        
                return {
        
                    path:'/login'
                };
            }
        }
    });

其他路由守卫,请参考https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

#### 2.10 不同的历史模式 ####

在创建路由器实例时，`history` 配置允许我们在不同的历史模式中进行选择。

##### 2.10.1 Hash 模式 #####

hash 模式是用 `createWebHashHistory()` 创建的：

import {
         createRouter, createWebHashHistory } from 'vue-router'
    
    const router = createRouter({
        
      history: createWebHashHistory(),
      routes: [
        //...
      ],
    })

它在内部传递的实际 URL 之前使用了一个哈希字符（`#`）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，**它在 SEO 中确实有不好的影响**。如果你担心这个问题，可以使用 HTML5 模式。

##### 2.10.2 HTML5 模式 #####

用 `createWebHistory()` 创建 HTML5 模式，推荐使用这个模式：

import {
         createRouter, createWebHistory } from 'vue-router'
    
    const router = createRouter({
        
      history: createWebHistory(),
      routes: [
        //...
      ],
    })

当使用这种历史模式时，URL 会看起来很 “正常”，例如 `https://example.com/user/id`。漂亮!

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 `https://example.com/user/id`，就会得到一个 404 错误。这就丑了。

不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 `index.html` 相同的页面。漂亮依旧!

nginx服务器:

location / {
      try_files $uri $uri/ /index.html;
    }

rom) =>\{  
if(to.path === ‘/home/product’ || to.path === ‘/home/ad’)\{  
if(!localStorage.getItem(“token”))\{  
return \{  
path:‘/login’  
\};  
\}  
\}  
\});

其他路由守卫,请参考https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
    
    
    
    ### 2.10 不同的历史模式
    
      		在创建路由器实例时，`history` 配置允许我们在不同的历史模式中进行选择。
    
    #### 2.10.1 Hash 模式
    
    		hash 模式是用 `createWebHashHistory()` 创建的：
    
    ```javascript
    import { createRouter, createWebHashHistory } from 'vue-router'
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes: [
        //...
      ],
    })

##### 2.10.2 HTML5 模式 #####

用 `createWebHistory()` 创建 HTML5 模式，推荐使用这个模式：

import {
         createRouter, createWebHistory } from 'vue-router'
    
    const router = createRouter({
        
      history: createWebHistory(),
      routes: [
        //...
      ],
    })

当使用这种历史模式时，URL 会看起来很 “正常”，例如 `https://example.com/user/id`。漂亮!

nginx服务器:

location / {
      try_files $uri $uri/ /index.html;
    }

[6bb5bce31cf74baba340b247464867ee.png]: https://img-blog.csdnimg.cn/6bb5bce31cf74baba340b247464867ee.png
[93ba7badada047cd8c5c87d26a00f0bf.png]: https://img-blog.csdnimg.cn/93ba7badada047cd8c5c87d26a00f0bf.png
[1ba2cc8380cf476ba030dcb342642a82.png]: https://img-blog.csdnimg.cn/1ba2cc8380cf476ba030dcb342642a82.png
[51cb03e3b7b040979307bd44cb095a0c.png]: https://img-blog.csdnimg.cn/51cb03e3b7b040979307bd44cb095a0c.png
[41b770cd2ed2425d8037dfa0d2aa11b5.png]: https://img-blog.csdnimg.cn/41b770cd2ed2425d8037dfa0d2aa11b5.png
[83d18dd1341a47b49337ecd3c8a2c459.png]: https://img-blog.csdnimg.cn/83d18dd1341a47b49337ecd3c8a2c459.png
[f2e020aeaa0348c2bcab98837fa471b6.png]: https://img-blog.csdnimg.cn/f2e020aeaa0348c2bcab98837fa471b6.png
[9b7afa5a668d400a93e521ecd5bff6f5.png]: https://img-blog.csdnimg.cn/9b7afa5a668d400a93e521ecd5bff6f5.png
[7404370b2fea4190b194174d1cbf7949.png]: https://img-blog.csdnimg.cn/7404370b2fea4190b194174d1cbf7949.png
[5c0d2dca0bfc4f9b8ca7c8fcf534d2a7.png]: https://img-blog.csdnimg.cn/5c0d2dca0bfc4f9b8ca7c8fcf534d2a7.png
[3b6a531a898e4e3f840b53e9a5a5698b.png]: https://img-blog.csdnimg.cn/3b6a531a898e4e3f840b53e9a5a5698b.png