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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 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和ACCESS写聊天室(二)
2006/10/09 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
详解Vue 如何监听Array的变化
2019/06/06 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
Python中zfill()方法的使用教程
2015/05/20 Python
Python中str.format()详解
2017/03/12 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
银行求职自荐信
2014/06/30 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python