vue中url改变回显目录高亮

详细很多小伙伴用vue作过这样的项目:
在这里插入图片描述
这是目录,当你点击一项时,这一项的颜色就变了,当你浏览器地址栏改变url时,目录也会自动高亮url所指向的路由;
那么这是怎么实现的呢,直接上代码:

<el-menu
      :router="true"
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="/home">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/manageTask/">
        <i class="el-icon-folder-opened"></i>
        <span slot="title">任务管理</span>
      </el-menu-item>
      <el-menu-item index="/manageLogs">
        <i class="el-icon-notebook-2"></i>
        <span slot="title">日志管理</span>
      </el-menu-item>
    </el-menu>

你只需要修改el-menu-item中的index值就行了呀(改为你的路由地址)
那么肯定有人遇到过这样url的情况:

http://localhost:8088/#/manageLogs?id=1

当url有参数,那目录就不自动高亮了,解决办法:
去router.js把你要跳转的哪一项路由的path修改为:(例子)

path: '/manageLogs/',

这样就能高亮显示了

Vue组件实现表单数据回显的方式有多种。一种常见的方式是在组件使用计算属性,并将需要回显的数据绑定到对应的表单元素上。这样当数据发生变化时,表单元素会自动更新。另外,你还可以使用v-model指令来进行双向数据绑定,这样当输入框的值发生变化时,数据会自动更新。除了这些基本的方法,还有一些其他的技巧可以实现数据回显,比如使用组件的props属性来传递数据,或者使用Vuex来管理和共享数据。总之,根据具体的需求和场景选择合适的方法来实现数据回显是很重要的。 [2 [3<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue组件表单数据回显验证及提交的实例代码](https://download.csdn.net/download/weixin_38550834/12953240)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue点击修改数据回显的方式](https://blog.csdn.net/m0_47195133/article/details/123984832)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值