Vue3中的history模式路由：打造无缝导航体验！

风清扬雨

于 2024-08-10 21:02:37 发布

阅读量557

点赞数 4

分类专栏：前端Vue3 文章标签： vue 前端路由设计

本文链接：https://blog.csdn.net/Jacklx888/article/details/141096157

版权

前端Vue3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟

🔍 项目背景

Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是hash模式，URL会带上一个“#”。为了获得更加美观的URL，我们可以使用history模式。今天我们就来一起看看如何在Vue3中使用history模式吧！🚀

📑 实战演练

1️⃣ 创建Vue3项目

首先，我们需要使用Vue CLI来创建一个Vue3项目。如果你还没有安装Vue CLI，可以通过npm安装：

npm install -g @vue/cli

然后创建一个新的Vue3项目：

vue create vue3-history-router
cd vue3-history-router

2️⃣ 配置路由

接下来，我们来配置Vue Router的history模式。在项目的src/router/index.js文件中，我们需要做一些调整：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
];

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

export default router;

这里的关键是使用createWebHistory()来创建一个history模式的路由器。注意，这里的createWebHistory()不带任何参数，因为我们假设服务器配置已经被正确设置。

3️⃣ 配置服务器

为了让history模式工作，我们需要配置服务器。当用户访问不存在的URL时，服务器应该返回我们的主应用文件（通常是index.html）。这里是一个简单的Nginx配置示例：

server {
  listen 80;
  server_name example.com;

  location / {
    try_files $uri /index.html;
  }

  # 其他配置...
}

如果你使用的是其他服务器（如Apache或Node.js的Express），配置方式类似，关键是让所有请求都指向index.html。

4️⃣ 添加路由链接

在src/App.vue文件中，我们将添加一些导航链接：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

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