【前端学习指南】第四站 Vue Router 路由

爱吃糖的范同学

已于 2024-11-17 16:39:28 修改

阅读量1k

点赞数 31

分类专栏：零基础前端之旅文章标签：前端 vue.js javascript

于 2024-11-17 16:25:21 首次发布

本文链接：https://blog.csdn.net/weixin_52058417/article/details/135078256

版权

🍭 Hello，这里是爱吃糖的范同学

🔴 想把自己学习技术的经历和一些总结分享给大家！

🔴 通过这样的方式记录自己成长，同时沉淀自己的技术，我会把所有额外的时间和经历投放到CSDN和公众号（💥公号名：AIRC Team💥，欢迎关注，为大家准备了很多有关编程学习资料）文章的撰写。

🔴 希望能通过这样的方式让大家认识我，和我一起学习编程，共同进步！😃

希望能和大家一起进步和成长！坚持热爱！🎉🎉🎉

5.Vue 路由 Router 模式分析：

📌 今日一言：

A：也许我这平凡的一生都将在996中度过了~
B：别想了35就被裁了，回家卖烧烤吧~

📌 Vue 单页应用概述：

单页应用程序 SPA（Single Page Application）。单页应用程序所有功能都在一个 HTML 页面上实现。所有的组件切换都是在这个唯一的页面内完成的，此时不同组件之间的切换需要通过前端路由来实现。

单页和多页应用对比：

单页面应用程序：系统类网站、内部网站、文档类网站、移动端站点
多页面应用程序：公司官网、电商类网站

单页面应用程序开发效率高、性能高、用户体验好，最大的原因就是页面是按需更新的。但是如果需要按需更新，那么就需要明确页面的访问路径和组件之间的对应关系，使得 Vue 知道当前的访问路径下需要进行渲染哪些组件。

Vue 中提供了路由机制来确定访问路径和组件之间的对应关系。

📌 Vue 路由 Router：

Vue 中的路由其实就是路径和组件之间的映射关系。

前端路由：这里的路由就是指前端路由，就是路径（Hash地址）和组件之间的映射关系。
后端路由：后端路由通常是指请求方式，请求地址与 function 处理函数之间的对应关系。

前端路由的工作方式：

当用户点击了页面上的路由链接，导致URL地址栏中的Hash值发生了变化，前端路由监听到了Hash地址的变化，前端路由就会把当前Hash地址对应的组件渲染到浏览器中。实现路由切换和组件切换动作。

1.Vue 路由 Router 概述：

Vue Router 是由 Vue 提供的官方路由插件（第三方包），作用：修改地址栏路径时，切换显示匹配的组件。

Vue Router | Vue.js 的官方路由 (vuejs.org)https://router.vuejs.org/zh/

2.Vue 路由 Router 安装：

注意：由于当前 Vue 目前主流的两个版本分别是 Vue 2.X 和 Vue 3.X（后续我们将学习 Vue 3.X 新语法）。在进行包安装时，需要针对不同版本安装插件依赖。

Vue 2.X 对应的 Vue Router 3.X 版本

Vue 3.X 对应的 Vue Router 4.X 版本

安装 Vue Router 插件到当前工程（这里使用的是Vue3的版本进行操作，Vue3中的只能使用 vue-router 4.X 版本）

npm install vue-router@4

在完整的项目开发过程中，需要单独对路由模块进行定义，需要单独创建 router 路由模块得到路由实例，挂载到入口文件main中的。

首先，从 vue-router 中导入两个方法：

createRouter：创建路由实例
createWebHistory：指定路由工作模式

import { createRouter, createWebHistory } from 'vue-router';

创建路由的实例对象：

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

// 创建路由实列
const router = createRouter({
    // 通过history属性指定路由的工作模式
    history: createWebHistory('/'),
    // 通过routes数组，定义路由规则
    routes: [
        {
            path: '/',
            name: 'Layout',
            component: () => import('@/layout/index.vue'),
            children: [
                {
                    path: '/home',
                    name: 'Home',
                    component: () => import('@/views/home/index.vue')
                },
                {
                    path: '/modelInfo',
                    name: 'ModelInfo',
                    component: () => import('@/views/model/info/index.vue')
                }
            ]
        }
    ]
})

// 向外暴露路由实例对象
export default router

在 main.js 中引入创建好的路由实例：

import router from './router'

在 Vue 实例（main 入口文件中进行挂载）中挂在路由实例对象，保证全局可用：

Vue.use(router)

3.Vue 路由 Router 配置：

首先，创建需要的路由组件（本质还是一个 Vue 组件）在 views 目录下，配置路由规则：

// 配置 Vue Router 规则：
const router = new VueRouter({
    // routes 表示可以配置多条路由匹配规则：
    routes: [
        // 路由匹配项：
        {path: '/home', component: HomePage},
        {path: '/about-us', component: AboutUsPage}
    ]
})

这里就能直观的看出路由和组件之间的映射关系，通过配置 path（访问地址栏路径）和 component（被访问组件）的对应关系，实现 path 和 component 之间的绑定关系。

然后，配置路由导航，配置路由出口（路径匹配的组件显示的位置）：

<!-- 路由渲染的占位符 -->
<router-view></router-view>

<router-view> 标签标识路由占位符，表示当前路由所对应的组件结构将会被渲染到占位符所在的页面结构中。

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <br>
        <!-- 设置路由切换的超链接 -->
        <a href="#/home">HOME</a>
        <br>
        <a href="#/about-us">AboutUs</a>
        <!-- 路由渲染的占位符 -->
        <router-view></router-view>
    </div>
</template>

页面显示效果：

实现了根据不同的访问路径渲染不同的组件：

可以使用<router-link>标签代替<a>标签实现路由的切换，<router-link>是官方提供的用来声明路由链接的标签。

<template>
  <div id="app">
    <nav>
      <!-- 使用 router-link 进行页面跳转 -->
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>

    <!-- 路由视图，展示匹配到的路由组件 -->
    <router-view></router-view>
  </div>
</template>