vue3+ts项目 配置vue-router以及router-link激活时一些激活类的操作

安装vue-router

pnpm install vue-router

配置

1.src/router/index.ts文件下的内容

import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import remainingRouter from './modules/remaining'

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH), // createWebHashHistory URL带#，createWebHistory URL不带#
  strict: true,
  routes: remainingRouter as RouteRecordRaw[],
  scrollBehavior: () => ({ left: 0, top: 0 })
})

export const setupRouter = (app: App<Element>) => {
  app.use(router)
}

export default router

2.src/router/modules/remaining.ts

import HomeView from '../../views/HomeView.vue'
const remainingRouter= [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../../views/AboutView.vue'),
  },
]

export default remainingRouter

3. main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 路由
import router, { setupRouter } from './router'
const setupAll = async () => {
  const app = createApp(App)
  setupRouter(app)
  await router.isReady()

  app.mount('#app')
}

setupAll()

4.App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView style="height: calc(100% - 1.5em)" />
</template>

<style scoped>
header {
  max-height: 100vh;
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}
</style>

5.src/views/AboutView.vue

<template>
  <div> AboutView </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'AboutView' })
</script>

<style lang="scss" scoped></style>

6.src/views/HomeView.vue

<template>
  <div> HomeView </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'HomeView' })
</script>

<style lang="scss" scoped></style>

RouterLink激活时的class类

vue-router官网api说明 https://router.vuejs.org/zh/api/interfaces/RouterLinkProps.html#Properties-activeClass

如何通过在跳转到对应的router页面是 显示激活样式

默认情况

默认情况下我们可以观察到激活后该routerLink 上hui添加两个类 router-link-active(链接在匹配当前路由时被应用到 class) router-link-exact-active(链接在严格匹配当前路由时被应用到 class)

routerLink返回的数据

<script setup lang="ts">
const handleClick = (link: any) => {
  console.log('link', link)
}
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/" #default="link">
          <div @click="handleClick(link)"> Home </div>
        </RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
  <div style="height: calc(100% - 1.5em)">
    <RouterView />
  </div>
</template>

通过打印我们得出以下数据

自定义配置全局激活class

https://router.vuejs.org/zh/api/interfaces/RouterOptions.html

import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import remainingRouter from './modules/remaining'

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH), // createWebHashHistory URL带#，createWebHistory URL不带#
  strict: true,
  routes: remainingRouter as RouteRecordRaw[],
  scrollBehavior: () => ({ left: 0, top: 0 }),
  // 匹配当前路由的 RouterLink 默认的 CSS class。如果没有提供，则会使用 router-link-active。
  linkActiveClass: 'global-active', 
  // 严格匹配当前路由的 RouterLink 默认的 CSS class。如果没有提供，则会使用 router-link-exact-active。
  linkExactActiveClass: 'global-exact-active'
})

export const setupRouter = (app: App<Element>) => {
  app.use(router)
}

export default router

自定义router-link激活类

https://router.vuejs.org/zh/api/interfaces/RouterLinkProps.html#Properties-activeClass

 <nav>
        <RouterLink
          to="/"
          activeClass="active1 active2"
          exactActiveClass="exactActive1 exactActive2"
          >Home</RouterLink
        >
        <RouterLink
          to="/about"
          activeClass="active1 active2"
          exactActiveClass="exactActive1 exactActive2"
          >About</RouterLink
        >
      </nav>

文章demo参考github commit记录

https://github.com/kingHjp/my-vite-create-vue3/tree/dev