Vue Router：构建一个简单高效单页面应用的导航系统

Danta
896 阅读6分钟

vue 全家桶之 vue-router 路由

oioi,可不是这个全家桶

image.png

Vue Router 是官方的路由管理器。它与 Vue.js 核心深度集成，让构建单页面应用程序 (SPA) 变得轻而易举。而SPA 是一种网页应用，它可以在不重新加载整个页面的情况下动态地改变视图。

今天，通过基础的学习，我们来做个简单高效单页面应用的导航系统。

Vue 语法基础回顾

在深入探讨 Vue Router 之前，我们先快速回顾一下 Vue 的核心概念：

  • 组件：Vue 应用程序由一系列独立的、可复用的组件构成。
  • 响应式：Vue 提供了声明式的数据绑定和组件系统，使得状态管理和UI更新变得简单。
  • 生命周期钩子：允许我们在组件的不同生命周期阶段执行代码。
  • 指令：如 v-bind 绑定属性，v-model 创建双向数据绑定，v-for 进行列表渲染。
  • 属性：包括 ref（引用），props（父组件传递给子组件的数据），以及 computed（计算属性）。

了解了这些我们进入今天的 Vue Router 基础

Vue Router 基础

Vue Router 负责管理应用中的导航。通过使用 <router-link> 组件，我们可以创建链接，这些链接不会触发传统的页面重载，而是只更新页面的一部分。

准备工作：

  • 执行npm init vite ，选择好vue 和JS,并下载好依赖。
  • 使用vue-router当然要安装好router依赖： npm i vue-router
  • 记住在main.js文件上 .use(router)：使用 Vue Router 插件，router 是 Vue Router 的实例。 如果你忘记了这一步，那后面你写的router-link标签，其实就是div标签了

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

总体框架：

image.png

重载与更新的优劣：

我将用一个简单的例子，使用a标签和vue-router，看看它们的区别：

  • 路由配置 (router/index.js)

代码

import Home from '../views/Home.vue'
// 路由配置
import {
   createRouter, // 创建路由实例  
   createWebHashHistory // 路由模式
} from 'vue-router' // 插件

const routes =[
   {
  path:'/', // 路径
   component:Home // 页面组件
  
}
]
const router=createRouter({
   // 创建路由
   history:createWebHashHistory(),
   // 路由模式
   routes  // 路由配置数组
})
export default router

  • 代码解释：

    • routes：是一个包含路由定义的对象数组。每个对象至少需要两个属性：path（路由路径）和 component（与该路径关联的组件），含义为到你到达path 时会为你渲染component中对应组件， 其中Home,就是相对应的组件。
    • createRouter：用于创建一个新的 Vue Router 实例。
    • history 中有 createWebHashHistory：指定使用的路由模式为哈希模式（#） createWebHistory：生成“正常”的URL，没有 # 符号，例如http://example.com/user/123，初学时，两个填写一个就好了。

  • 在App.vue中：

<script setup>

</script>

<template>
  <div>
    <a href="/home">点我刷新页面</a>
    <hr>
    <router-link to="/">点我直接跳转</router-link>
  </div>

</template>

<style scoped>

</style>
  • 代码解释：
    • <a> 标签： 这是一个标准的 HTML 锚点元素。点击它会导致浏览器尝试加载 /home 页面，这将导致整个页面重新加载。
    • <router-link> 组件：这是 Vue Router 提供的一个自定义组件，用来替代 <a> 标签进行页面内导航。它的 to 属性指定了目标路径。点击此链接时，Vue Router 会拦截导航行为，更新 URL 并渲染相应的组件，而不会重新加载整个页面。这是实现无刷新导航的关键所在。

演示：

PixPin_2025-01-04_21-11-54.gif

结论： router-link 组件包含a的功能

主要优势： 单页面应用（SPA）与传统基于 <a> 标签的多页面应用（MPA）相比，在用户体验和开发效率上有着显著的不同。以下是 SPA 相对于传统 <a> 标签链接的主要优势：

  • 无刷新导航：用户可以在不重新加载整个页面的情况下浏览不同的视图或页面。
  • 提高性能：减少了网络请求的数量，加快了页面切换的速度。
  • 更好的用户体验：提供了更加平滑、即时响应的体验，类似于桌面应用程序。

内容显示：

那长的帅的读者就要问了，内容怎么展示呀？通过上面的理解，我们已经直接使用vue-router能给我们带来的好处，那么下面这个例子将实现一个简单的SPA，并展示内容。

我们需要了解一下：

<router-view> 是 Vue Router 提供的一个特殊组件，它在单页面应用（SPA）中扮演着至关重要的角色。它的主要作用是作为一个占位符或容器，用来动态地渲染与当前路由匹配的组件。每当用户导航到不同的路径时，Vue Router 会根据配置的路由规则，自动将对应的组件插入到 <router-view> 所在的位置。

延续上面的代码例子：

App.vue: 添加：

  <div>  
    <router-link to="/home">点我直接回家</router-link>
    <hr>
    <router-link to="/about">点我直接到达关于</router-link>
    <hr>
    <router-view/>
  </div>

路由配置：

const routes =[
    {
   path:'/home', // 路径
    component:Home // 页面组件
  },
  {
    path:'/about', // 路径
     component:About // 页面组件
   }
]

效果：

PixPin_2025-01-05_21-31-05.gif

子路由

我们About中添加一个子路由的页面显示：

PixPin_2025-01-05_22-11-41.gif 还是利用上面的案例进行增加：

路由配置

const routes =[
    {
   path:'/home', // 路径
    component:Home // 页面组件
  },
  {
    path:'/about', // 路径
     component:About ,// 页面组件
      children:[
                 {
                     path:'meta',
                     component:Aboutson,
                 }
             ]
   }

]

嵌套路由 (/about/meta) ：

  • 在 /about 下定义了一个子路由，其路径为 meta。
  • 这意味着当用户访问 /about/meta 时，About 组件会被渲染，同时在其内部的 <router-view> 中会渲染 Aboutson 组件。

About.vue 中

<template>
    <div>
       来到关于
    <hr>
     <button @click="goto">点击进入文章</button> 
     <router-view></router-view>
    </div>
  
</template>
<script setup>

import {useRouter} from 'vue-router'
const router = useRouter() // 路由实例 总管 


 const goto=()=>{
        // js 跳转 
        // Browser Object Model  >  DOM
        // BOM API
        // 破坏了什么
        // window.location.href = '/'
        router.push('/about/meta')
    }

</script>

<style lang="scss" scoped>

</style>
  • 按钮：包含文本“点击进入文章”，并绑定了 @click 事件，当点击时会调用 goto 方法。
  • <router-view> ：在这里渲染嵌套路由的子组件。在这个例子中，如果用户导航到 /about/meta，则 Aboutson 组件将在这里被渲染。
  • 引入 useRouter：从 vue-router 中导入 useRouter 函数，并通过它获取当前应用的路由实例。
    • router.push('/about/meta') 是 Vue Router 提供的一个用于编程式导航的方法，它允许你在代码中动态地改变当前的路由。当你调用 router.push() 时，Vue Router 会根据提供的路径或命名路由信息更新浏览器的 URL，并相应地渲染匹配的组件。就像压入栈一样，将新的网页更新压入进去。
    • 与window.location.href = '/about/meta'的区别：

image.png

总结：

  • 无刷新导航：使用 <router-link> 和 <router-view> 实现页面内导航，避免了页面重载。

  • 编程式导航：利用 router.push() 动态改变路由，保持应用状态。

  • 子路由：通过嵌套路由定义复杂的页面结构，增强应用的功能性。

通过这些再加上一些CSS样式，我们就能做出一个简单的导航页面：

PixPin_2025-01-05_22-28-05.gif

源码

还在学习当中，有问题欢迎指出，谢谢。

avatar
文章
阅读
粉丝