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

【Vue3路由小技巧】用Hash模式打造流畅体验！

article 2025/2/10 20:35:36

Hey小伙伴们！👋 今天给大家带来一个Vue3中使用Hash模式路由的实战案例，让你的单页面应用更加流畅！👩‍💻✨

📚 什么是Hash模式？

在Vue Router中，Hash模式是最常见的路由模式之一。它使用URL的哈希部分来跟踪浏览器的历史记录。这意味着你在浏览器地址栏中看到的URL会带有#符号，例如http://example.com/#/home。这种模式的好处在于它不需要服务器的支持，而且在所有浏览器中都能很好地工作。👌

💻 实战案例

接下来，我们来创建一个简单的Vue3应用，使用Hash模式来管理路由。跟着我的步骤走，你会学会如何在Vue3中配置和使用Hash模式路由！👩‍💻✨

1. 初始化项目

首先，我们需要创建一个新的Vue3项目。如果你还没有安装Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

接着，创建一个新的Vue3项目：

vue create my-app
cd my-app

2. 安装Vue Router

在项目中安装Vue Router：

npm install vue-router@4

3. 配置Vue Router

打开src/router/index.js文件，配置Vue Router。我们将使用Hash模式来设置路由。

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

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

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

export default router;

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>
import { createApp } from 'vue';
import router from './router';

createApp(App).use(router).mount('#app');
</script>