当前位置: 首页 > news >正文

vue3记个坑关于router的特点

我的问题有一下几点

1. router-view 在使用name进行命名

这个命名,我再三确定没有命名错误的情况下。我的组件死活出不来。仔细排查了之后,也反复看了官方文档。终于发现

    <router-view name="login"></router-view>

这个是路由上的实现方式为:

{path: '/login',name: 'login',components: {login: Login},//component: Login,// 添加元信息,可用于全局前置守卫判断是否需要鉴权meta: {requiresAuth: false, // 登录页面不需要鉴权},},

一定一定不能是这种,会识别不上的!!!!

{path: '/login',name: 'login',component:Login,//component: Login,// 添加元信息,可用于全局前置守卫判断是否需要鉴权meta: {requiresAuth: false, // 登录页面不需要鉴权},},

而且默认路由为第一个components下面的第一个,其他的就可以通过router-view 中的那么调用!!!!

2.router-link 使用 :to="{name=‘xxxx’}"时的问题

一定要明白这玩意是跳转,他与router-view有着本质上的不同。而且跳转的路由下的组件,一定得在当前页面才可以!!!
比如:这样就不行

 <li><router-link active-class="active" :to="{name:'login'} " replace>Login</router-link>
</li>

这样就可以

<li><router-link active-class="active" :to="{name:'login'} " replace>Login</router-link>
</li><router-view name="login"></router-view>

相关文章:

  • Reflector简介-archlinux更新镜像列表工具
  • Kafka 进阶指南
  • vue3引入本地静态资源图片
  • 免费的CMS指纹识别系统
  • 【动态规划 前缀和】2478. 完美分割的方案数
  • 国产音频放大器工作原理以及应用领域
  • 外贸企业选择什么网络?
  • Git的安装配置及使用(超详细!!!)
  • LeetCode.224基本计算器
  • 【幂等性】详解
  • springboot升级到2.7.17后,quartz集群模式配置修改
  • java多线程之ThreadLocal详解
  • 【Linux详解】进程地址空间
  • 网络爬虫中Xpath的使用方法
  • 【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(1)
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?
  • canvas 高仿 Apple Watch 表盘
  • iOS 颜色设置看我就够了
  • JAVA 学习IO流
  • PAT A1092
  • Yeoman_Bower_Grunt
  • 给初学者:JavaScript 中数组操作注意点
  • 基于web的全景—— Pannellum小试
  • 精彩代码 vue.js
  • 通过几道题目学习二叉搜索树
  • 微服务入门【系列视频课程】
  • 项目管理碎碎念系列之一:干系人管理
  • 小程序开发中的那些坑
  • 《码出高效》学习笔记与书中错误记录
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • Unity3D - 异步加载游戏场景与异步加载游戏资源进度条 ...
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • ​ ​Redis(五)主从复制:主从模式介绍、配置、拓扑(一主一从结构、一主多从结构、树形主从结构)、原理(复制过程、​​​​​​​数据同步psync)、总结
  • ​DB-Engines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座
  • $refs 、$nextTic、动态组件、name的使用
  • (2024,Vision-LSTM,ViL,xLSTM,ViT,ViM,双向扫描)xLSTM 作为通用视觉骨干
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • (附源码)spring boot校园拼车微信小程序 毕业设计 091617
  • (教学思路 C#之类三)方法参数类型(ref、out、parmas)
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (十二)devops持续集成开发——jenkins的全局工具配置之sonar qube环境安装及配置
  • (四)docker:为mysql和java jar运行环境创建同一网络,容器互联
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (一) storm的集群安装与配置
  • (转载)虚幻引擎3--【UnrealScript教程】章节一:20.location和rotation
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .Net Core缓存组件(MemoryCache)源码解析
  • .NET Micro Framework 4.2 beta 源码探析
  • .NET Remoting Basic(10)-创建不同宿主的客户端与服务器端
  • .NET 的程序集加载上下文
  • .NET 解决重复提交问题
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...
  • .NET8 动态添加定时任务(CRON Expression, Whatever)