vue3路由配置

HWL5679

于 2024-06-24 11:14:12 发布

阅读量1.3k

点赞数 22

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/H2608520347/article/details/139919791

版权

使用 Vue Router（Vue.js 的官方路由管理器）来配置一个 Vue 应用的路由。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:'/',
      redirect:'/home'
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('@/views/HomeView.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

导入必要的模块
```
import { createRouter, createWebHistory } from 'vue-router'
```
这里从 vue-router 包中导入了两个函数：createRouter 和 createWebHistory。createRouter 用于创建一个新的路由实例，而 createWebHistory 用于创建一个基于 HTML5 历史模式的路由实例。
2. 创建路由实例
```
const router = createRouter({  
  ...  
})
```
使用 createRouter 函数来创建一个新的路由实例，并赋值给 router 变量。
3. 设置路由的历史模式
```
history: createWebHistory(import.meta.env.BASE_URL),
```
这里设置了路由的历史模式为基于 HTML5 的历史模式（也称为“HTML5 History 模式”）。这意味着 Vue Router 将使用 HTML5 History API 来管理 URL，而不是传统的哈希模式（例如 #/home）。

import.meta.env.BASE_URL 是一个 Vite 或 Vue CLI 提供的环境变量，它通常代表应用的基础 URL。但在这里，createWebHistory 函数并不需要这个参数，因为它仅仅创建一个新的历史记录实例，而不关心应用的基础 URL。所以，这个参数可能是不必要的，除非你有特定的用途。
4. 定义路由

在 routes 数组中，定义了应用的路由规则：
```
* 第一个路由规则：  
  
  
```javascript  
{  
  path:'/',  
  redirect:'/home'  
}  
```  
当用户访问应用的根路径（`/`）时，他们将被重定向到 `/home` 路径。  
* 第二个路由规则：  
  
  
```javascript  
{  
  path: '/home',  
  name: 'home',  
  component: () => import('@/views/HomeView.vue')  
}  
```  
当用户访问 `/home` 路径时，他们将看到 `HomeView.vue` 组件。这里使用了动态导入（`import()`），意味着该组件只有在需要时才会被加载。`@` 符号通常是一个别名，指向项目的 `src` 目录（这取决于你的项目配置）。  
* 第三个路由规则：  
  
  
```javascript  
{  
  path: '/about',  
  name: 'about',  
  component: () => import('../views/AboutView.vue')  
}  
```  
这个路由规则与第二个类似，但它是为 `/about` 路径定义的，并且直接使用了相对路径来导入 `AboutView.vue` 组件。
```
5. 导出路由实例
```
export default router
```
最后，这个路由实例被导出，以便在 Vue 应用的其他部分中使用。

HTML5 History API 与传统的哈希模式（例如 #/home）在前端路由管理中的区别

URL 表现形式：
- HTML5 History API：使用标准的 URL 路径，如 /home 或 /about，无需 # 符号。这种形式的 URL 更符合用户习惯和搜索引擎优化（SEO）的要求。
- 哈希模式：在 URL 中使用 # 符号来模拟路由，如 #/home 或 #/about。# 后面的部分被称为哈希片段（hash fragment），它不会发送到服务器，只存在于浏览器中。
工作原理：
- HTML5 History API：利用 HTML5 提供的 History API 来管理浏览器的历史记录。当 URL 路径改变时，通过 JavaScript 的 pushState 或 replaceState 方法添加或修改历史记录条目，而不会重新加载整个页面。浏览器会根据这些历史记录条目加载相应的页面内容，但需要服务器端的支持来处理不在首页的 URL 请求。
- 哈希模式：通过改变 URL 中的哈希片段来触发页面内容的加载。JavaScript 可以监听 hashchange 事件来检测 URL 的变化，并根据哈希片段的不同值加载相应的页面内容。哈希路由不需要服务器端的支持，因为哈希片段的改变不会触发页面刷新或向服务器发送请求。
兼容性和SEO：
- HTML5 History API：需要浏览器支持 HTML5 History API，因此在一些老旧浏览器中可能无法正常工作。但它提供了更美观的 URL，有利于 SEO 和用户体验。
- 哈希模式：兼容性较好，即使在不支持 HTML5 History API 的浏览器中也能正常工作。但由于 URL 中包含 # 符号，可能会影响 SEO 效果和用户体验。
实现细节：
- 在 HTML5 History API 模式下，当用户点击链接或进行其他导航操作时，JavaScript 会通过 pushState 或 replaceState 方法来修改 URL 并更新页面内容。浏览器的前进和后退按钮也可以正常工作，因为它们操作的是浏览器的历史记录。
- 在哈希模式下，当用户点击链接时，JavaScript 会修改 window.location.hash 属性来改变 URL 的哈希片段。然后，JavaScript 会监听 hashchange 事件来检测 URL 的变化，并根据哈希片段的不同值加载相应的页面内容。

总结来说，HTML5 History API 提供了更现代、更美观的 URL 管理方式，但需要服务器端的支持和较好的浏览器兼容性。而哈希模式则具有更好的兼容性，但 URL 表现形式和 SEO 效果可能不如 HTML5 History API。在选择使用哪种模式时，需要根据项目需求、目标用户群体和服务器配置等因素进行综合考虑。

在 Vue Router 中，当使用 createWebHistory 方法时，Vue Router 会使用 HTML5 History API 来管理 URL，这意味着 URL 将不包含 #（哈希符号），而是像普通的网页链接一样。

哈希模式（Hash Mode）是 Vue Router 的默认模式，但在 HTML5 History 模式（History Mode）下，你可以获得更“正常”的 URL，这对于搜索引擎优化（SEO）和用户体验（比如可以直接通过 URL 分享页面）都有好处。

但是，需要注意的是，在 History 模式下，如果你的服务器没有正确配置，用户可能会在直接访问一个深层链接（如 /user/123）时遇到 404 错误，因为服务器通常不知道如何响应这样的请求。为了避免这个问题，你需要确保服务器对于所有路由都能返回相同的 index.html 文件，然后由 Vue Router 在客户端接管并显示正确的视图。

在 Vue CLI 创建的项目中，通常会为你配置一个开发服务器（如 webpack-dev-server），这个服务器会自动处理这个问题。但在生产环境中，你需要自己配置服务器来确保正确的行为。