vue 小白初次实践踩坑（二）-路由与location

阿夏呀

已于 2022-11-09 17:54:38 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue js

于 2020-11-17 15:56:35 首次发布

本文链接：https://blog.youkuaiyun.com/summer_cloudy/article/details/109744812

本文介绍了Vue小白在实践中遇到的路由问题，包括如何实现点击导航跳转页面并保持选中状态，以及如何根据location判断首次进入时的导航选中状态。涉及到Vue路由的使用及模拟layui导航的hover样式应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 小白初次实践踩坑（二）-路由与location

需求：

第一种：要求点击不同的导航跳转到另一个页面，在另一个页面上也有通用的导航，刚刚点击的那个导航应该处于选中状态（高亮）

<template>
    <div>
        <ul class="header-menu" ref="MainHeader" @mouseleave="handleLeaveMainHeader">
            <li v-for="(item,index) in nav_data" :key="index" :id="item.id" :class="{active:index === activeIndex}" 
            @mouseenter="setCurrentNav(index)">
                <a :href="item.url" target="_blank">{
   
   {
   
   item.name}}</a>
            </li>
            <span class="nav-underline" :style="currentNavStyle" style="opacity: 0;" ref="bar"></span>
        </ul>
    </div>
</template>

<script>
    export default{
   
   
        name:'RpNavHead',
        data() {
   
   
            return {
   
   
                activeNav:1,
                currentNavStyle:{
   
   
                    width:'0',
                    left:'0'
                },
                nav_data:[
                    {
   
   
                        id:'navWorkbench',
                        name:'工作台',
                        url:'//hc.hanmaker.com/app_common/index.php?m=workbench&a=index',
                    },
                    {
   
   
                        id:'navWorkReport',
                        name:'工作报告',
                        url:'//okr.hanmaker.com/#/myreport/wrtreport?source=1',
                    },
                    {
   
   
                        id:'navApproval',
                        name:'审批流程',
                        url:'//approval.hanmaker.c