vue3路由高亮显示

最新推荐文章于 2024-09-09 16:03:45 发布

鲤忆

最新推荐文章于 2024-09-09 16:03:45 发布

阅读量476

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62487693/article/details/129389441

本文介绍了在Vue3中如何设置路由高亮显示，包括安装vue-router、初始化路由对象、创建路由配置以及使用createWebHistory和createWebHashHistory等不同模式。同时，提供了针对router-link-active和router-link-exact-active的CSS样式来实现高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

# 第一次使用

- 1：安装 `npm install vue-router -D`

>注意vue2.x支持 vue-router@3 vue3.x支持 vue-route@4

- 2: 初始化路由对象

- 1：创建独立的文件

- 2：编写路由实例对象代码

- 3:将路由对象挂在到应用对象上（main。js）

> 如果不挂在，不能再当前项目中使用路由的。

## 如何使用路由实现单页面应用

- 1：搭建导航条

- RouterLink

- RouterView

- 2：编写路由配置

## router@4中几种路由模式

- createWebHistory()

- createWebHashHistory()

1.vite.config.js 文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
//vite 的插件 作用：打包编译.vue文件
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  //https://vitejs.dev/config/
  plugins: [vue()], //使用插件
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'api':fileURLToPath(new URL('./src/api',import.meta.url))
    }
  }
})