vue的路由映射问题及解决方案


Posted in Javascript onOctober 14, 2019

今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下:

// 生日贺卡
 { path: 'birthdayRemind', component: load('@/components/app/birthdayRemind/BirthdayRemind')}

然后我是通过进入home页面,点击一个图标,进入到这个生日贺卡页面,路径如下:

const tmpConfig = [
 { funcName: '生日贺卡', link: '/home/0/work/birthdayRemind/BirthdayRemind', icon: require('../../assets/img/home/toolbar1.png') },
];

然后整个文件路径如下图所示:

vue的路由映射问题及解决方案

然后,路径啥的都有,结果死活进入不了BirthdayRemind.vue页面

解决问题

搞了挺久,最后同事告诉我,原来是图标 link 属性的路径写错了,正确是这样写的:

const tmpConfig = [
 { funcName: '生日贺卡', link: '/home/0/work/birthdayRemind', icon: require('../../assets/img/home/toolbar1.png') },
 { funcName: '应用中心', link: '/home/0/work/appCenter', icon: require('../../assets/img/home/toolbar1.png') },
];

是不是觉得很奇怪,明明具体的文件路径为:link: ' /home /0 / work / birthdayRemind / BirthdayRemind ',却报错,而写该文件的上一层文件夹路径(link: '/ home/0/work/birthdayRemind),却写对了?

分析问题

我想了一下,其实还是蛮有道理的,因为在Router的路由映射js当中,Router首先是从path属性开始查找,找到对应的path,就会load具体的路径。例如上面的 link: '/home/0/work/birthdayRemind',Router就会在vue的路由映射表中,查找path,path: '/birthdayRemind' 的名字映射,然后就会自动load出具体的vue地址,然后就渲染出来。

而错误的写法是: localhost:8080 / birthdayRemind / BirthdayRemind , 很明显,路由映射表中,没有一个path: '/ birthdayRemind / BirthdayRemind' ,所有就渲染不出来了对应的vue

因为工作项目的不同,这里的/home/o/work/ 就相当于 localhost:8080/ ,相当于跟路径。

总结:

以后如果想要Router查找到相应的vue路径,只需要 http://localhost:8080 + path ,就能找到并渲染出相应的页面了。

ps:这里的path是在路由映射表中写的,格式如下:

import Rank from 'components/rank/rank'
 
 
export default new Router({
 routes: [
  // {
  //  path: '/',
  //  name: 'Hello',
  //  component: Hello
  // },
  {
   path: '/',
   redirect: '/recommend'
  },
  {
   path: '/rank',
   component: Rank
  }
 ]
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实用基础超详细介绍
Apr 11 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
vue router 配置路由的方法
Jul 26 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 #Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 #Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 #Javascript
Vue3 源码导读(推荐)
Oct 14 #Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 #Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 #Javascript
vue循环数组改变点击文字的颜色
Oct 14 #Javascript
You might like
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python如何实现复制目录到指定目录
2020/02/13 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
目标责任书范文
2014/04/14 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
标准毕业生自荐信
2014/06/24 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技