likes
comments
collection
share

Vue路由学习，你的URL指路专家

作者站长头像
站长
· 阅读数 56

想要学好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路由学习，你的URL指路专家

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

也可以像下面这样先引入，再赋值给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()：

    1. createWebHashHistory是Vue Router 4中用于创建一个基于浏览器哈希 (#) 的历史记录对象的方法。它利用浏览器的URL哈希部分来保存路由状态，而不触发完整的页面重载。此方法特别适用于兼容旧浏览器的单页面应用（SPA），兼容性较好。
    2. createWebHistory() 是 Vue Router 库中的一个函数，用于创建一个基于 HTML5 历史 API 的路由器实例，使用 createWebHistory() 的一个关键点是，服务器必须正确配置，以处理所有路径都指向同一个入口文件（通常是 index.html）。这是因为，当用户直接访问或刷新非根 URL 时，如果没有正确的服务器配置，可能会导致 404 错误。

    总结

    • createWebHashHistory() 不需要服务器端的特殊配置，但 URL 包含 #，可能不那么美观。
    • createWebHistory() 提供更干净的 URL 结构，但需要服务器端的配合。

我们在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路由学习，你的URL指路专家

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

路由传参数

好了，今天的路由学习分享就到这里吧，路由的内容还有很多，vue的学习，如同漫漫长夜，我们一步一步来。不喜勿喷哦，大佬们！！

转载自:https://juejin.cn/post/7391045267078987786
评论
请登录