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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
浅谈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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
destoon官方标签大全
2014/06/20 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
Python如何对XML 解析
2020/06/28 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
护士自我评价范文
2014/01/25 职场文书
庆七一活动总结
2014/08/27 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
js判断两个数组相等的5种方法
2022/05/06 Javascript