Vue3【二十一】Vue 路由模式（createWebHashHistory /createWebHistory ）和RouterLink写法

在Vue 3中，路由的管理是通过Vue Router来实现的。Vue Router支持两种主要的路由模式：createWebHistory和createWebHashHistory。这两种模式在实现路由时各有其优缺点，使用场景也有所不同。在本文中，我们将深入探讨这两种路由模式，并通过实例来说明如何使用RouterLink来实现路由跳转。

一、路由模式介绍

1. createWebHistory

createWebHistory模式是HTML5的历史模式，它利用浏览器的History API来实现路由导航。在这种模式下，URL是干净的，没有井号（#），例如：http://example.com/home。当用户在浏览器中直接输入该URL时，浏览器会直接请求该页面。需要注意的是，在服务器端，应该将所有请求重定向到index.html文件，以确保路由能够正常工作。

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

2. createWebHashHistory

createWebHashHistory模式则是基于URL的哈希值。路由路径以井号（#）开始，例如：http://example.com/#/home。这种模式不需要服务器配置，因此更容易在静态网页托管时使用。因为哈希值不会发送到服务器，所以服务器配置的复杂性大大降低。不过，这种模式在搜索引擎友好性上较差，因为哈希部分通常不被索引。

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

二、RouterLink 用法

在Vue Router中，RouterLink组件用于创建导航链接。使用时只需将目标路由的path属性绑定到to属性。

示例：

<template>
  <div>
    <h1>欢迎来到我的网站</h1>
    <nav>
      <RouterLink to="/">首页</RouterLink>
      <RouterLink to="/about">关于我们</RouterLink>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

三、选择路由模式的考虑因素

1. SEO需求：如果对SEO要求较高，建议选择createWebHistory模式，因为这种模式的URL较为友好，便于被搜索引擎抓取。

2. 服务器环境：如果环境不支持HTML5 History API（例如某些静态托管服务），那么createWebHashHistory模式是更安全的选择。

3. 用户体验：使用createWebHistory模式时，页面路由不会造成完整的页面刷新，提供更好的用户体验。

结论

总而言之，Vue 3中提供的路由模式createWebHistory和createWebHashHistory使得开发者能够根据具体需求灵活选择适合的路由方案。在实现路由跳转时，RouterLink组件简化了链接的创建，使得导航更加便捷。通过合理选择路由模式，可以显著提升应用的可用性和用户体验。希望通过这篇文章，大家能够更好地理解Vue Router的用法及其背后的工作原理。