Vue前端篇——Vue 3 中的路由基本认识
原创
前言
在Vue.js中，路由是一个非常重要的概念，它允许我们在单页面应用中进行页面的无刷新切换。Vue Router是Vue.js的官方路由管理器，它和Vue.js的核心深度集成，使构建单页面应用变得容易。在Vue 3中，使用的是vue-router的最新版本，即4版本。本文也将通过案例代码讲解vue3的路由组件知识点。
路由基本使用
首先，需要在Vue项目中安装vue-router。安装完成后，可以开始配置路由。路由配置文件通常放在项目的src/router目录下，创建一个名为index.js的文件，分别引入三个跳转组件，代码如下，主要是当用户访问对应根路径时，跳转到对应的组件中。
import { createRouter, createWebHistory } from 'vue-router';
//
import Home from '@/pages/Home.vue';
import News from '@/pages/News.vue';
import About from '@/pages/About.vue';
const router = createRouter({
history: createWebHistory(), // 使用history模式
routes: [
{
path: '/home',
component: Home, // 当用户访问根路径时，显示Home组件
},
{
path: '/news',
component: News, // 显示News组件
},
{
path: '/about',
component: About, // 显示About组件
},
],
});
export default router; // 导出路由配置接下来，我们需要在主入口文件main.ts中引入并使用路由配置：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index'; // 引入路由配置
const app = createApp(App);
app.use(router); // 使用路由配置
app.mount('#app'); // 挂载Vue实例到#app元素上最后，在App.vue文件中，我们需要定义导航链接和展示区域：
<template>
<div class="app">
<h2 class="title">Vue路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
<RouterLink to="/about" active-class="active">关于</RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView></RouterView> <!-- 路由匹配到的组件将在这里渲染 -->
</div>
</div>
</template>
<script lang="ts" setup name="App">
import { RouterLink, RouterView } from 'vue-router'; // 引入RouterLink和RouterView组件
</script>
<style>
/* 添加一些基本的样式 */
.app {
display: flex;
flex-direction: column;
align-items: center;
}
.navigate {
display: flex;
justify-content: space-around;
width: 100%;
}
.active {
color: red; /* 选中时的颜色 */
}
</style>在上面的代码中，我们使用了RouterLink组件来创建导航链接，并通过to属性指定链接的目标路径。active-class属性用于指定当链接处于激活状态时应用的CSS类名。RouterView组件用于渲染当前路由匹配到的组件。
通过这样的配置，当用户点击不同的导航链接时，Vue应用会根据路由配置加载对应的组件，而不需要刷新整个页面，从而实现平滑的页面切换效果。
运行代码，点击不同的模块，就会跳转不同的内容。
此外，Vue Router还提供了丰富的功能，如嵌套路由、动态路由、路由守卫等，这些都可以根据应用的需求进行配置和使用，以增强应用的功能性和用户体验，后续文章也会逐一讲解。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
