VUE—linkActiveClass 动态配置active class

Posted 2023-03-17

参考技术A 一.在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？

这样<router-link>被点击激活的时候就会被加上is-active这个class了。注意如果没有设置router-link的标签类型，会是<a>标签,<a>标签是没有宽度和高度的。将router-link 这样的a标签转化为li标签

二.自己来操控 active Class 给加的位置，并不想它随着路由的改变而改变
假如侧边栏我的钱包，路由为'/myWallet'，在'/myWallet'页面可以操作提现，会进入'/withdraw'提现页面，路由发生变化，从'/myWallet' 身上移到'/withdraw'上了。如何让 '/myWallet' 这个页面的active Class 保留住呢？给'/withdraw' 加上一个路由元信息，在侧边栏去检查路由元信息，然后看是否需要给其active class

如果只有一个页面 对应一个active的,就不用添加 meta下面的active属性了

vue请求本地json文件,config.json配置动态地址，维护无需修改代码

本地使用config.json

只需要把config.json文件放在static或webpack3生成的脚手架public里
使用config.json文件时，dev或serve开发环境可以运行和使用，生产环境会报跨域错误。

{
    "BASE_URL":"www.baidu.com"
}

使用（main.js里）：

import "../public/config.json"

//webpack3/4
import "../static/config.json"

生产环境

因为无法使用json了，换一种思路

在刚才config.json的地方新建config.js

const config = {
  path: "www.baidu.com", //接口地址
};
console.log(config);
sessionStorage.setItem(\'response\', JSON.stringify(config));
console.log(JSON.parse(sessionStorage.getItem("response")).path)

使用（主入口文件index.html）

<script src="./config.js"></script>

在需要的地方

const path = JSON.parse(sessionStorage.getItem("response")).path