Vue前端篇——Vue 3 中的路由基本认识

前言

在Vue.js中，路由是一个非常重要的概念，它允许我们在单页面应用中进行页面的无刷新切换。Vue Router是Vue.js的官方路由管理器，它和Vue.js的核心深度集成，使构建单页面应用变得容易。在Vue 3中，使用的是vue-router的最新版本，即4版本。本文也将通过案例代码讲解vue3的路由组件知识点。

路由基本使用

首先，需要在Vue项目中安装vue-router。安装完成后，可以开始配置路由。路由配置文件通常放在项目的src/router目录下，创建一个名为index.js的文件，分别引入三个跳转组件，代码如下，主要是当用户访问对应根路径时，跳转到对应的组件中。

代码语言：javascript复制

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中引入并使用路由配置：

代码语言：javascript复制

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文件中，我们需要定义导航链接和展示区域：

代码语言：html复制

<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还提供了丰富的功能，如嵌套路由、动态路由、路由守卫等，这些都可以根据应用的需求进行配置和使用，以增强应用的功能性和用户体验，后续文章也会逐一讲解。

腾讯技术创作特训营S8

0 人点赞