vue-element-admin如果打开过的页面进行router-link会再次调用mounted吗
时间: 2024-01-08 12:02:57 浏览: 23
如果在 vue-element-admin 中使用了 Vue Router 进行页面跳转,并且在路由配置中设置了 `keepAlive: true`,那么在打开过的页面进行 `router-link` 跳转时,不会再次触发 `mounted` 钩子函数。而是会触发 `activated` 钩子函数。`activated` 钩子函数会在页面被激活时执行,而不是每次页面被加载时都执行。
相关问题
vue-element-admin中router-link-active怎么定义颜色
在`vue-element-admin`中,`router-link-active`是用来表示当前活动路由的类名,可以通过CSS样式来定义其颜色。具体方法如下:
1. 在`src/styles/variables.scss`中定义需要的颜色变量,例如:
```scss
$active-color: #409eff;
```
2. 在`src/styles/mixins.scss`中定义`router-link-active`样式,例如:
```scss
@mixin router-link-active {
color: $active-color;
// 下划线效果
&:after {
content: "";
display: block;
height: 2px;
background-color: $active-color;
transform: scaleX(0);
transition: transform 0.2s ease-in-out;
}
&:hover:after {
transform: scaleX(1);
}
}
```
3. 在组件中使用`router-link`,并在其上添加`v-bind:class="{ 'router-link-active': $route.path === '/your-path' }"`,例如:
```html
<router-link
v-bind:to="{ path: '/your-path' }"
v-bind:class="{ 'router-link-active': $route.path === '/your-path' }"
>
Your Route
</router-link>
```
这样,在当前路由为`/your-path`时,`router-link-active`类名会被添加到该`router-link`元素上,并且该元素的颜色会变为`$active-color`所定义的颜色。
vue-element-admin中的router-link-active颜色设置不生效
如果在vue-element-admin中设置router-link-active的颜色无效,有可能是你设置的样式被其他样式覆盖了。你可以尝试使用!important来强制覆盖其他样式,例如:
```
.router-link-active {
color: red !important;
}
```
如果这个方法还是不行,你可以检查一下你的样式是否放在了合适的位置。你可以把样式放在App.vue中,或者在main.js中引入样式文件。同时,你也可以在组件的<style>标签中设置样式。如果还是不行,可以查看一下样式是不是被覆盖了。