vue点击路由刷新选中样式不变

最新推荐文章于 2024-08-16 16:35:58 发布

清许～

最新推荐文章于 2024-08-16 16:35:58 发布

阅读量408

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53590046/article/details/125136351

版权

在Vue项目中，使用路由配置并结合CSS实现页面跳转时导航栏选中样式不改变。通过在routes的index.js中设置路由，并在JS中处理高亮逻辑，配合CSS样式，确保导航项在对应的路由下保持选中状态。

摘要由CSDN通过智能技术生成

我这里用的是vue路由进行配置的数据

以下是routes中index.js的内容

import VueRouter from 'vue-router';
import app from '../App'
//导入主页内容
import home from '../components/home.vue'
//导入基础内容
import basics from "../components/basics.vue";
const routes = [
    //配置路由
    {
        path: '/',
        component: app,
        mate: {
            title: '登录页面'
        },
        //默认子路由
        redirect: '/home',
        //子路由
        children: [
            {//配置主页内容
                path: 'home',
                name: 'home',
                component: home,
            },
            {//配置基础内容
                path: 'basics',
                name: 'basics',
                component: basics
            }
        ]
    },
];
const router = new VueRouter({
    mode: 'history',
    routes
})
export default router;

首页配置