切换语言为:繁体
Vue路由功能全解析

Vue路由功能全解析

  • 爱糖宝
  • 2024-07-14
  • 2081
  • 0
  • 0

想要学好vue,vue的路由功能是必不可少的,也是做单页应用开发,必不可少的一环,那么接下来我们就来看看vue的路由是怎么一回事吧。

什么是路由

路由可分为

  • 客户端路由 (Client-side Routing)

    客户端路由,也称为单页应用路由(SPA - Single Page Application routing),是在浏览器中管理应用程序内部不同视图或页面的过程。当用户在应用内部导航时,客户端路由会更新URL,并且只请求和渲染那些发生变化的部分,而不是重新加载整个页面。

  • 服务端路由 (Server-side Routing)

    服务端路由则是在服务器上处理URL请求的过程。当用户访问一个URL时,服务器根据URL解析出对应的资源或业务逻辑,并返回相应的HTML页面或API响应,每次页面导航都会导致完整的页面加载。。

在Vue.js中,路由指的是一个框架内用于处理URL和视图之间的映射关系的系统,通常我们使用vue-router库来实现这一功能。vue-router是Vue.js官方提供的路由管理器,它与Vue的核心深度集成,使得构建单页面应用(SPA)变得更加容易。

路由的使用

如果你想为你的vue项目加入路由功能:

  1. 使用 JavaScript 包管理器安装Vue Router, 输入指令: npm install vue-router@4

或者你需要创建新项目,可以使用npm create vue@latest,他会创建一个基于vite的vue项目,它会提供Vue Router的选项,只需要在创建的时候添加就好了。

添加Vue Router选项的方式引入路由咱就不说了,让我们自己来手动引入看看,该怎么使用vue路由吧。

  • 首先在项目内下载vue-router库,指令为:npm install vue-router@4

  • 在src目录下创建router文件,添加一个index.js的路由配置文件,内容如下:

Vue路由功能全解析

可以配置很多个路由,其他的路由配置和这个路由的格式是一样,我们只需要按照这样配就好,它们也被称为一级路由

也可以像下面这样先引入,再赋值给component属性。其他可以设置的路由选项我们会在之后介绍,目前我们只需要 path 和 component

import { createMemoryHistory, createRouter } from 'vue-router' 
import HomeView from './HomeView.vue' 
import AboutView from './AboutView.vue' 

const routes = [ { 
        path: '/', 
        component: HomeView 
    }, 
    { 
        path: '/about',
        component: AboutView 
    },
] 
const router = createRouter({   // 创建路由器实例是通过调用 `createRouter()` 函数创建的:
    history: createMemoryHistory(), 
    routes, 
})
  • 配置history时,通常,我们会使用 createWebHistory() 或 createWebHashHistory()

    • createWebHashHistory() 不需要服务器端的特殊配置,但 URL 包含 #,可能不那么美观。

    • createWebHistory() 提供更干净的 URL 结构,但需要服务器端的配合。

    总结

    1. createWebHashHistory是Vue Router 4中用于创建一个基于浏览器哈希 (#) 的历史记录对象的方法。它利用浏览器的URL哈希部分来保存路由状态,而不触发完整的页面重载。此方法特别适用于兼容旧浏览器的单页面应用(SPA),兼容性较好。

    2. createWebHistory() 是 Vue Router 库中的一个函数,用于创建一个基于 HTML5 历史 API 的路由器实例,使用 createWebHistory() 的一个关键点是,服务器必须正确配置,以处理所有路径都指向同一个入口文件(通常是 index.html)。这是因为,当用户直接访问或刷新非根 URL 时,如果没有正确的服务器配置,可能会导致 404 错误。

我们在Vue Router中定义了path: '/home'这样的路由规则时,意味着有一个特定的组件被关联到了/home这个URL路径。为了让这个组件的内容展示在页面上,你需要在浏览器的地址栏中输入http://xxxxxx/home(其中xxxxxx是你的网站域名),或者在应用内部通过<router-link :to="{ path: '/home' }">this.$router.push('/home')等方式进行导航。

<template>
  <nav> 
    <RouterLink to="/">Go to Home</RouterLink> 
    <RouterLink to="/about">Go to About</RouterLink> 
  </nav> 

  <main> <RouterView /> </main>
</template>
  • 就像上面的这样可以点击Go to About/home路径下的特定组件将被显示在<RouterView />,而RouterView又被称为——路由入口。

    • <router-link>是Vue Router提供的一种特殊的Vue组件,用于在单页应用中创建链接。它的工作方式类似于HTML中的<a>标签,但是它在内部使用Vue Router的导航机制,而不是传统的页面跳转,这意味着在点击链接时,页面不会完全重新加载,而是只更新与新路由关联的部分视图。

    • <router-view>是Vue Router中一个非常关键的组件,用于在应用程序中渲染与当前活动路由相匹配的组件。它是Vue Router的主要出口点,负责展示当前路由对应的视图内容。

  • 这样就可以使用路由功能吗?其实这样是不行,我们还需要在项目单点入口文件内引入这个router,并使用。

Vue路由功能全解析

  • 启动项目,你的一个简单的路由使用就完成了。

路由传参数

  • 应用场景:

    路由传递参数是一个很常见的场景,就像掘金的文章查看一样:

    Vue路由功能全解析

  • Vue路由功能全解析

    有一个文章id,然后通过id查找该篇文章的信息,进行展示,所有这个还是很常见的。

  • 传参,首先需要了解编程式导航(下面是vue-router官方文档解释)

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

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

  • 所以你用路由时携带参数可以这样:

    Vue路由功能全解析

    Vue路由功能全解析


    不声明 prop接收参数:

    Vue路由功能全解析

    为了解除使用$route 或useRoute()会与路由耦合的限制,可以声明 prop 接收参数:

    Vue路由功能全解析

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.