从 KFC 全家桶🍔到 Vue 全家桶的Router：构建现代Web应用的美味配方

是染染啊
149 阅读5分钟

Vue3路由讲解

在构建现代Web应用程序时，Vue.js 无疑是前端开发中的一颗璀璨明星。它不仅简化了组件化开发，还通过其配套工具链——“Vue全家桶”，即Vue Router和状态管理库（如Vuex或Pinia），让开发者能够更高效地管理复杂的应用逻辑。本文将聚焦于Vue Router，探讨它是如何优雅地接管路由，为用户提供流畅的导航体验。

路由是什么？

Vue Router 是官方提供的路由管理器，专为 Vue.js 应用程序设计。它与a标签不同，它使得开发者可以在不重新加载整个页面的情况下，动态地更新视图，从而创建单页面应用程序（SPA）。通过将URL路径与特定的组件关联起来，Vue Router实现了应用内部页面之间的平滑过渡，提供了更流畅、更快捷的用户体验。

路由的创建流程

image.png

<router-link>与<a>标签的区别

<router-link> 和传统的 <a> 标签在单页面应用程序（SPA）中有显著的区别，这些差异主要体现在它们的工作方式、性能影响以及用户体验上。以下是两者之间的一些关键区别：

1.页面加载行为

  • <a> 标签：当用户点击一个 <a> 标签时，默认情况下会触发浏览器的完整页面重新加载。这会导致整个页面被重新请求和渲染，包括HTML、CSS、JavaScript等资源，从而增加了延迟，并且对于大型应用来说，这可能会导致不必要的资源消耗。
  • <router-link> ：相比之下，<router-link> 是 Vue Router 提供的一个组件，它用于在不刷新页面的情况下动态更新视图。点击 <router-link> 时，Vue Router 会拦截默认的行为，通过改变URL来匹配相应的路由配置，然后只更新需要变化的部分内容，保持应用状态的一致性，提供更快的响应速度。

但是当 <router-link> 组件没有被正确解析或生效时，Vue.js 将无法识别它为一个特殊的组件，并会将其当作普通的 HTML 标签处理。

示例：

<div>
    <router-link to="/"><p>首页</p></router-link>
    <router-link to="/about"><p>关于</p></router-link>
</div>

image.png 当没有在配置路由并在入口文件main.js里面.use(router)挂载路由，<router-link> 都会被当作html标签处理。现在让我们来配置一下路由和挂载。

  • main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App) // 示例化vue
.use(router) // 挂载路由
.mount('#app')
  • 路由配置，建议在创建的router文件夹配置。 这里的views 文件夹用于存放代表独立页面或视图的单页组件， 而 components 文件夹则用于存放那些将在应用中复用的静态或功能组件。 这样可以将页面级别的逻辑与组件级别的逻辑区分开来，使项目结构更加清晰。 （Home.vue和About.vue里面就两个P标签！）
import {
    createRouter,
    createWebHistory
} from 'vue-router'// 导入路由
// 导入组件
// ..代表当前目录的上一级目录
// views 文件夹用于存放代表独立页面或视图的单页组件，
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 配置路由
const routes = [
    {
        path:'/',
        component:Home
    },
    {
        path:'/about',
        component:About
    }
]
// 实例化路由
const router = createRouter({
    history:createWebHistory(),// 路由模式
    routes // 路由
})
// 导出路由
export default router
  • App.vue
<div>
    <router-link to="/"><p>首页</p></router-link>
    <router-link to="/about"><p>关于</p></router-link>
</div>
  <main>
    <router-view></router-view>
  </main>

ezgif-7-d7b9c19552.gif

2.动态路由与参数处理

  • <a> 标签：构建动态链接或包含查询参数时，需要手动拼接字符串，容易出错且不够直观。
  • <router-link> ：内置对动态路径片段（如 '/posts/:postId'）和查询参数的支持，允许通过 to 属性传递对象来轻松创建复杂的URL模式，简化了开发过程并减少了错误发生的可能性。这里的 :postId 就是一个动态路径片段，它可以匹配任何ID值，比如 /posts/123 或 /posts/456。

在上面代码做出一点修改，示例：

  • 修改后的路由配置
import {
    createRouter,
    createWebHistory
} from 'vue-router'// 导入路由
// 导入组件
// ..代表当前目录的上一级目录
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Pos from '../views/Pos.vue'
import PostShow from '../views/PostShow.vue'
// 配置路由
const routes = [
    {
        path:'/',
        component:Home
    },
    {
        path:'/about',
        component:About
    },
    {
        path: '/posts',
        component: Pos
    },
    {
        path: '/posts/:postId', // 动态路由
        component:PostShow
    }
]
// 实例化路由
const router = createRouter({
    history:createWebHistory(),// 路由模式
    routes // 路由
})
// 导出路由
export default router
  • 修改后的App.vue
<div>
    <router-link to="/"><p>首页</p></router-link>
    <router-link to="/about"><p>关于</p></router-link>
    <router-link to="/posts">内容</router-link>
</div>
  <main>
    <router-view></router-view>
  </main>

ezgif-2-2b17fd68b0.gif 这个里的params 对象是 Vue Router 提供的一种机制，用于处理动态路径片段中的参数。通过这种方式，你可以轻松地在不同的页面之间传递和访问特定的数据，从而实现更灵活和动态的单页面应用（SPA）。我们可以打印一下看一下route对象看看。

e308e7d75fc409eac741da1f9678bd1.png 以上是对vue-router的一个简短讲解，你们可以动手亲自实践试试。

总结

Vue Router 是 Vue.js 的官方路由管理器，它允许开发者创建单页面应用程序（SPA），即在不刷新整个页面的情况下动态加载不同的组件。通过将URL路径与特定的Vue组件关联起来，Vue Router实现了应用内部页面之间的平滑过渡，为用户提供更加流畅、快速的浏览体验。

为了实现这样的功能，我们需要首先安装 Vue Router 并在项目中配置好路由规则。这通常包括定义一组路由对象，每个对象指定一个路径和对应的组件。然后我们使用 createRouter 和 createWebHistory 函数来创建一个路由器实例，并将其挂载到 Vue 应用程序中。

在模板中，我们可以使用 <router-link> 组件代替传统的 <a> 标签来进行导航。<router-link> 不会触发页面重载，而是利用 JavaScript 来改变浏览器地址栏中的 URL，并相应地更新显示的内容。此外，它还支持传递参数给动态路由，使得构建复杂的应用逻辑变得更加容易。

最后，在页面布局中加入 <router-view> 组件，它是用来渲染匹配当前路径的组件的地方。当用户点击 <router-link> 时，Vue Router 会根据新的路径找到对应的组件并将其渲染在 <router-view> 中。这样就完成了从一个视图到另一个视图的切换，而无需重新加载整个网页。

总之，Vue Router 提供了一套完整的解决方案，用于管理 SPA 中的导航和状态保持，极大地方便了现代 Web 应用程序的开发。

avatar
文章
阅读
粉丝