前端路由vue-router的基本使用

桃扇骨 2024-04-08 08:25 140阅读 0赞

#### 文章目录 ####

*  一.前端路由的概念与原理
 *   *  1. 什么是路由
     *  2.前端路由的工作方式
 *  二.vue-router 的基本用法
 *   *  1. 什么是 vue-router
     *  2. vue-router 的版本
     *  3. vue-router 4.x 的基本使用步骤
 *  三.路由的高级使用
 *   *  1.路由重定向
     *  2. 路由高亮
     *  3. 嵌套路由
     *  4. 动态路由匹配
     *  5.编程式导航

## 一.前端路由的概念与原理 ##

### 1. 什么是路由 ###

路由（英文：router）就是对应关系。路由分为两大类：  
① 后端路由  
后端路由指的是：请求方式、请求地址与 function 处理函数之间的对应关系。在 node.js 课程中，express  
路由的基本用法如下：  
![在这里插入图片描述][f592c70f22104a19a39a5a841bb7f3cc.png]  
② 前端路由  
Hash 地址与组件之间的对应关系

### 2.前端路由的工作方式 ###

① 用户点击了页面上的路由链接  
② 导致了 URL 地址栏中的 Hash 值发生了变化  
③ 前端路由监听了到 Hash 地址的变化  
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中  
![在这里插入图片描述][2cd321e9b10243498179e528e6b7b57d.png]

## 二.vue-router 的基本用法 ##

### 1. 什么是 vue-router ###

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目  
中组件的切换。

### 2. vue-router 的版本 ###

vue-router 目前有 3.x 的版本和 4.x 的版本。其中：  
⚫ vue-router 3.x 只能结合 vue2 进行使用  
⚫ vue-router 4.x 只能结合 vue3 进行使用  
vue-router 3.x 的官方文档地址：https://router.vuejs.org/zh/  
vue-router 4.x 的官方文档地址：https://next.router.vuejs.org/

### 3. vue-router 4.x 的基本使用步骤 ###

(1) 在项目中安装 vue-router  
npm install vue-router@next -S  
(2) 定义路由组件  
(3) 声明路由链接和占位符

<template>
      <h1>vue-router的基本使用</h1>
      
      
      <router-link to="/home">首页</router-link><br>
      <router-link to="/movie">电影</router-link><br>
      <router-link to="/about">关于</router-link>
      
      <router-view></router-view>
    </template>
    <script>
    export default {
      name: "MyApp"
    }

(4) 创建路由模块 ① 从 vue-router 中按需导入两个方法 ② 导入需要使用路由控制的组件 ③ 创建路由实例对象 ④ 向外共享路由实例对象 ⑤ 在 main.js 中导入并挂载路由模块

// 1.从vue-router中按需导入两个方法
    // createRouter 方法用于创建路由的实例对象
    // createWebHashHistory 用于指定路由的工作模式(hash模式)
    import { createRouter, createWebHashHistory } from "vue-router";
    // 2.导入组件，这些组件将要以路由的方式，来控制他们的切换
    import Home from "./MyHome.vue";
    import Movie from "./MyMovie.vue";
    import About from "./MyAbout.vue";
    // 3.创建路由实例对象
    const router = createRouter({
      // 3.1 通过history属性指定路由的工作模式
      history: createWebHashHistory(),
      // 3.2 通过 routes数组，指定路由规则
      routes: [
        // path是hash值，指定路由规则
        { path: "/home", component: Home },
        { path: "/movie", component: Movie },
        { path: "/about", component: About },
      ],
    });
    // 4.向外共享路由实例对象，供其他模块导入并使用
    export default router;

(5) 导入并挂载路由模块  
—main.js

// 从vue中按需导入 creatApp函数
    // creatApp函数的作用：创建vue的“单页面应用程序实例”
    import { createApp } from "vue";
    // 导入待渲染的APP组件
    import App from "./App.vue";
    import "./index.css";
    // 导入路由模块
    import router from "./components/router";
    // 3.调用createApp函数，返回值是“单页面应用程序的实例”，用常量spa_app进行接收
    const spa_app = createApp(App);
    // 挂载路由模块
    // app.use()方法用来挂载“第三方的插件模块”
    spa_app.use(router);
    // 4.调用spa_app实例的mount方法，用来指定vue实际要控制的区域
    spa_app.mount("#app");

## 三.路由的高级使用 ##

### 1.路由重定向 ###

（1）路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。  
（2）通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

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

### 2. 路由高亮 ###

可以通过如下的两种方式，将激活的路由链接进行高亮显示：  
(1) 使用默认的高亮 class 类  
查看源码可以发现，被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式：

//在index.css全局样式表中，重置router-link-active的样式
    .router-link-active {
      background-color: red;
      color: white;
      font-weight: bold;
    }

(2) 自定义路由高亮的 class 类  
在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：  
![在这里插入图片描述][12ef2b278ac642bf8d978b1173acf1c1.png]

.router-active {
      background-color: pink;
      color: white;
      font-weight: bold;
    }

### 3. 嵌套路由 ###

通过路由实现组件的嵌套展示，叫做嵌套路由。  
(1) 声明子路由链接和子路由占位符

<template>
      <h1>MyAbout组件</h1>
      
      <router-link to="/about/tab1">tab1</router-link>  
      <router-link to="/about/tab2">tab2</router-link>
      
      <router-view></router-view>
    </template>

(2) 在父路由规则中，通过 children 属性嵌套声明子路由规则

import Tab1 from "./tabs/Tab1.vue";
    import Tab2 from "./tabs/Tab2.vue";
    const router = createRouter({
      routes: [
        { //about 页面的路由规则
          path: "/about",
          component: About,
          children: [
            { path: "tab1", component: Tab1 }, //访问/about/tab1时，显示Tab1组件
            { path: "tab2", component: Tab2 }, //访问/about/tab2时，显示Tab2组件
          ],
        },
      ],
    });

### 4. 动态路由匹配 ###

（1） 动态路由的概念  
动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。  
（2）动态路由的使用  
在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：  
①App.vue

<template>
      <h1>vue-router的基本使用</h1>
      
      <router-link to="/movie/1">电影1</router-link><br>  
      <router-link to="/movie/2">电影2</router-link><br>  
      <router-link to="/movie/3">电影3</router-link><br>
      
      <router-view></router-view>
    </template>

②router.js

//路由中的动态参数以 : 进行声明，冒号后面的是动态参数的名称 
     { path: "/movie/:id", component: Movie },

(3)$route.params 参数对象  
通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数值.  
冒号后面的参数叫什么，就点什么  
![在这里插入图片描述][2be50fc9432f417fa681e630e0f8e1bc.png]  
(4)使用 props 接收路由参数  
为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参  
①在定义路由规则时，声明props：true 选项  
\{ path: “/movie/:id”, component: Movie, props: true \}  
②使用props接收路由规则中匹配到的参数项  
③直接使用props中接收到的路由参数

<template>
      <h1>电影---{
       { id }}</h1>
    </template>
    <script>
    export default {
          
      props: ['id']
    }
    </script>

### 5.编程式导航 ###

（1）通过调用 API 实现导航的方式，叫做编程式导航。与之对应的，通过点击链接实现导航的方式，叫做声明式导航。  
（2）vue-router 提供了许多编程式导航的 API，其中最常用的两个 API 分别是：  
① this.`$router`.push(‘hash 地址’)  
⚫ 跳转到指定 Hash 地址，从而展示对应的组件

teacherApi.addTeacher(this.teacher)
            .then(response => {
              //提示信息
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.$router.push({ path: "/teacher/table" });
            })

② this.`$router`.go(数值 n)  
⚫ 实现导航历史的前进、后退  
![在这里插入图片描述][a6e79dc2196d455c8f52e7d74fdc94cc.png]

[f592c70f22104a19a39a5a841bb7f3cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0980ea938d344280bd7b6ed3be691a40.png
[2cd321e9b10243498179e528e6b7b57d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/00275d98a25c49b9a501a549e4a87816.png
[beae99d599d54785a6c04013dbe16c9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3d32028cb86a4286ba8ca17c7128b8c9.png
[12ef2b278ac642bf8d978b1173acf1c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/b8c9bc2bad274dc08b479aa87b284a78.png
[2be50fc9432f417fa681e630e0f8e1bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8be32d88bed247e5bbfea3eb06bca970.png
[a6e79dc2196d455c8f52e7d74fdc94cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/6d7fa4e2a6934e7ba65b8a40541367a2.png