当前位置：首页 > news >正文

网站模板 metinfo网站优化+山东

news 2025/8/12 15:01:29

网站模板 metinfo,网站优化+山东,哪个商城网站建设好,新型h5网站建设Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟 🔍 项目背景 Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是has…

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>