如何在Vue3中使用vue-router添加简单的路由功能
在现代前端开发中，构建单页应用（SPA）已经成为一种常见的需求。在Vue3中，vue-router 作为官方推荐的路由库，可以帮助我们轻松地管理应用中不同视图间的导航。本文将详细介绍如何在Vue3中使用vue-router添加简单的路由功能。
什么是vue-router？
vue-router 是 Vue.js 官方提供的路由管理插件，是 Vue.js 生态系统中的一个重要组成部分。它的主要作用是帮助开发者根据 URL 改变视图，从而实现单页应用的多视图效果。
安装vue-router
在开始之前，请确保你已经安装了 Vue CLI。如果还没有，请参考 Vue CLI 官方文档进行安装。
我们将使用 Vue CLI 创建一个新的 Vue3 项目，并在其中安装 vue-router。
- 创建新的 Vue3 项目：
打开你的终端，输入以下命令来创建一个新的 Vue3 项目：
vue create my-vue-app
按照提示进行选择，建议选择默认配置。创建项目后，进入项目目录：
cd my-vue-app
- 安装vue-router：
在项目目录中运行以下命令来安装 vue-router：
npm install vue-router@next
配置vue-router
接下来，我们将配置 vue-router 并创建一些简单的路由。
- 创建路由配置文件：
在 src 文件夹中创建一个名为 router 的文件夹，并其中创建一个名为 index.js 的文件：
src/
|-- router/
|-- index.js
- 定义路由：
在 index.js 文件中，定义路由配置并导出路由实例：
import { createRouter, createWebHistory } 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
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
在这段代码中，我们定义了两个简单的路由：Home 和 About。每个路由都映射到一个组件，我们随后将创建这些组件。
- 创建视图组件：
在 src/views 文件夹中创建 Home.vue 和 About.vue 文件：
src/
|-- views/
|-- Home.vue
|-- About.vue
在 Home.vue 文件中，输入以下代码：
<template>
<div class="home">
<h1>Home</h1>
<p>Welcome to the Home page.</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
.home {
text-align: center;
}
</style>
在 About.vue 文件中，输入以下代码：
<template>
<div class="about">
<h1>About</h1>
<p>This is the About page.</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
<style scoped>
.about {
text-align: center;
}
</style>
- 在主文件中使用路由：
打开 src/main.js 文件，并将路由实例添加到 Vue 应用中：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
- 在 App.vue 中使用
router-view：
打开 src/App.vue 文件，并使用 <router-view> 来展示匹配的路由组件：
<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>
<style>
nav {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
router-link {
margin: 0 10px;
text-decoration: none;
color: #42b983;
}
router-link-active {
font-weight: bold;
}
</style>
在这个文件中，我们添加了一个简单的导航栏，使用 <router-link> 组件来创建链接，这些链接会自动与我们的路由进行匹配。<router-view> 组件则是用来显示与当前 URL 对应的组件。
运行项目
完成以上步骤后，我们的项目就已经配置好了简单的路由功能。现在运行项目，打开浏览器访问即可看到效果：
npm run serve
访问 http://localhost:8080，你应该可以看到一个导航栏，上面有 Home 和 About 两个链接。点击这些链接，可以在不同视图之间切换。
总结
通过本文，我们了解了如何在 Vue3 项目中使用 vue-router 来添加简单的路由功能。vue-router 提供了丰富的配置选项和功能，除了基本的路径匹配外，还支持嵌套路由、命名视图、路由守卫等高级特性。