VUE3 开发入门指南：Vue.js 前端路由的使用

在 Vue3 开发中，前端路由是构建单页面应用（SPA）的关键技术之一。它能够实现页面的无刷新切换，为用户带来流畅的交互体验。下面就为大家详细介绍 Vue.js 前端路由的使用。

需要安装 Vue Router。在项目的根目录下，通过命令行执行 npm install vue-router@next 来完成安装。安装完成后，在项目中引入并配置路由。

创建一个 router 文件夹，在其中新建 index.js 文件。在这个文件里，我们先导入 createRouter 和 createWebHashHistory 方法。createWebHashHistory 用于创建基于 hash 模式的路由历史对象，这种模式下，URL 中的 hash 值（即 # 后面的部分）变化不会向服务器发送请求。

接着定义路由规则。例如：

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

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

这里定义了两个路由，根路径 '/' 对应 Home 组件，'/about' 路径对应 About 组件。

然后创建路由实例：

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

最后，将路由实例导出，以便在 main.js 中使用：

export default router;

在 main.js 里，导入并使用刚刚创建的路由实例：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

在组件中使用路由也很简单。可以通过 <router-link> 组件来创建导航链接，例如：

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

<router-view> 则用于展示当前路径对应的组件，通常在 App.vue 中使用：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

通过这些步骤，就可以在 Vue3 项目中初步使用前端路由了。随着项目的深入，还可以进一步学习路由守卫、路由懒加载等高级特性，让应用更加高效和强大。