首页 > 其他分享 >vue3 使用 router 进行跳转备忘

vue3 使用 router 进行跳转备忘

时间:2023-08-23 14:23:56浏览次数:42  
标签:el 菜单 menu 跳转 备忘 画面 vue3 router

1.在画面中添加子画面,使用 el-menu 菜单进行跳转,只更新子画面

a.首先在配置 router 路径的 js 文件中配置画面的路径,子画面的路径要在父画面的 children 下面

  在父节点下设置 redirect 属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白

 b.在画面显示区域添加 router-view 标签

 c.在菜单栏的 el-menu 中添加 router 属性

d.完成以上操作后,点击菜单选项就会跳转到相应的画面

在子画面刷新时,会出现相应菜单不高亮的问题,需要在菜单 el-menu 中加入以下代码:

:default-active="$route.path"

 

标签:el,菜单,menu,跳转,备忘,画面,vue3,router
From: https://www.cnblogs.com/SuperJason/p/17651495.html

相关文章

  • ios 调用系统应用的方法 应用间跳转的方法
    声明一个私有方法:#pragmamark-私有方法-(void)openUrl:(NSString*)urlStr{//注意url中包含协议名称,iOS根据协议确定调用哪个应用,例如发送邮件是“sms://”其中“//”可以省略写成“sms:”(其他协议也是如此)NSURL*url=[NSURLURLWithString:urlStr];UIApplica......
  • 【算法】在vue3的ts代码中分组group聚合源数据列表
    有一个IList<any>()对象列表,示例数据为[{id:'1',fieldName:'field1',value:'1'},{id:'1',fieldName:'field2',value:'2'},{id:'2',fieldName:'field1',value:'1'},{id:'2',......
  • vue3父子组件通信小结
    父子组件中的attrsprops理解/继承首先,父组件可以给子组件传入属性、监听函数(类似onClick),class,style,id,总结起来就是大三类-属性,监听函数,样式!爷爷组件--有两个监听函数import{computed,defineComponent,reactive,ref}from"vue";import{css}from"@emotion/css"......
  • iOS开发之--使用storyboard进行跳转
    iOS开发中使用故事板进行开发是非常高效的一种方式,虽然有这样那样的问题,但是不得不承认,使用sb可以在最短的时间内完成整个项目的布局,节约开发者大量的时间,而且便于修改,非常直观,虽然可能不太灵活,但是方便!下面就来总结下常用的跳转方式:一、纯代码界面跳转方式1.导航控制器(UINavigat......
  • VUE3单页面应用开发常用工具
    Vite一种新型的前端构建工具,它主要由两个部分做成一个开发服务器,它基于 原生ES模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。社区模......
  • vue3 watch 监听响应式数据变化 改变img的src
    目标:用一个图片来监视全局websocket对象的连接状态  全局websocket的写法详见:https://www.cnblogs.com/hailexuexi/p/17577818.htmlmain.js全局对象 websocket的连接状态//全局对象constglobalData=reactive({ websockStatus:"open",})app.provide('globalData',......
  • 在Vue3后台管理系统中使用watch和watcheffect
    ​ 1、watch在Vue3中的组合式API中,watch的作用和Vue2中的watch作用是一样的,他们都是用来监听响应式状态发生变化的,当响应式状态发生变化时,都会触发一个回调函数。constmessage=ref("test");watch(message,(newValue,oldValue)=>{console.log("新值:",ne......
  • Vue3 toRef响应式失效问题排查
    父组件conststuRecordInfo=ref<any>({stuNum:11111})//接口请求返回stuRecordInfo.value.stuNum=22222<StuRecord:info="stuRecordInfo":pictureInfo="pictureInfo"/>子组件constinfo=toRef(props,'info')consts......
  • 网站老域名跳转到新域名有哪些方法?内网穿透内网主机让外网访问
    在网站服务器变更及本地主机搭建时,我们经常会遇到老域名地址跳转到新URL的配置,一些朋友还会面对无公网IP让外网访问的问题。今天我们来了解下网站老域名跳转到新域名有哪些方法,以及如何通过内网穿透实现内网主机让外网访问。网站老域名跳转到新域名有哪些方法?1.域名解析URL转跳。可......
  • vscode 实现组件之间的跳转
    1.安装vetur和vue-helper两个插件2.打开设置-->扩展-->vuehelper,然后在右边找到在settings.json中编辑,点击,添加或修改下面的配置:   "vue-helper.alias":{       "@":"src"   },   "vue-helper.componentPrefix":{       "alias"......