vue中的.router-link-active和.router-link-exact-active什么意思
时间: 2023-08-18 17:14:06 浏览: 232
在Vue中,.router-link-active和.router-link-exact-active是用于样式控制的类名。这些类名可以用于给当前活动的路由链接添加样式。
.router-link-active类名会在当前路由链接的路径与当前路由匹配时被添加到元素上。例如,当访问路径为"/"时,具有to="/"的<router-link>元素会被添加.router-link-active类名。\[2\]
而.router-link-exact-active类名则会在当前路由链接的路径与当前路由完全匹配时被添加到元素上。例如,当访问路径为"/"时,具有to="/"且带有exact修饰符的<router-link>元素会被添加.router-link-exact-active类名。\[1\]
通过为这些类名添加样式,我们可以在活动的路由链接上应用特定的样式,以提高用户体验或突出显示当前所在的页面。
#### 引用[.reference_title]
- *1* *2* [router-link-active 与 router-link-exact-active 区别](https://blog.csdn.net/OJNBO_1/article/details/129475223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue路由中的router-link-exact-active和router-link-active](https://blog.csdn.net/zyz00000000/article/details/88713716)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文
相关推荐










这是我的Login.vue <template> 用户登录 <form @submit.prevent="Login"> 邮箱: <input v-model="form.email" type="email" placeholder="邮箱" required> 密码: <input v-model="form.password" type="password" placeholder="密码" required minlength="8"> <button type="submit">登录</button> 没有账号?<router-link to="/register">立即注册</router-link> {{ errorMsg }} </form> </template> <script> export default { name: 'LoginView', } </script> <script setup> import { ref } from 'vue'; import { useRouter, useRoute } from 'vue-router'; import { useAuthStore } from '@/store/auth'; import { UserLogin } from '@/api/api'; const form = ref({ email: '', password: '' }); const errorMsg = ref(''); const router = useRouter(); const route = useRoute(); const authStore = useAuthStore(); const Login = async () => { try { const response = await UserLogin(form.value); console.log(response); if (response.status === 200) { authStore.setToken(response.data.token); const redirectPath = route.query.redirect || '/'; router.push(redirectPath).then(() => { location.reload(); // 强制刷新页面 }); } else { errorMsg.value = '登录失败,请检查您的邮箱和密码。'; } } catch (error) { errorMsg.value = error.response?.data?.message || '登录失败'; } }; </script> <style> .LoginTitle { text-align: center; color: #25adba; } </style> 这是我的App.vue<template> <router-link to="/" class="nav-item">首页</router-link> <router-link to="/playmusic" class="nav-item">播放页</router-link> <router-link v-if="!authStore.isLoggedIn" to="/login" class="login-logout"> 登录 </router-link> 登出 <router-view></router-view> </template> <script setup> import { useAuthStore } from '@/store/auth' const authStore = useAuthStore() const logout = () => { authStore.logout() window.location.reload() // 重新加载页面,确保状态刷新 } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } .main-nav { padding: 20px; background: #f8f9fa; margin-bottom: 2rem; display: flex; /* 启用flex布局 */ justify-content: space-between; /* 左右分组自动分开 */ align-items: center; /* 垂直居中 */ } .nav-group { display: flex; gap: 15px; /* 现代浏览器间距设置 */ } .left{ margin-right: auto; } .right { margin-left: auto; /* 右侧组推到最右边 */ } .nav-item { text-decoration: none; color: #2c3e50; font-weight: bold; } .login-logout { margin: 0 15px; color: #2c3e50; text-align: right; text-decoration: none; } .login-logout:hover { opacity: 0.8; } .router-link-exact-active { color: #42b983; border-bottom: 2px solid #42b983; } </style>我希望能在app.vue里面获得到Login.vue的response








