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——表单应用范例
Feb 20 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
Javascript玩转继承(二)
May 08 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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函数
2006/12/06 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
简单了解python中的与或非运算
2019/09/18 Python
如何在python中实现随机选择
2019/11/02 Python
Python各种扩展名区别点整理
2020/02/27 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
static关键字的用法
2013/10/07 面试题
医学生个人求职信范文
2014/02/07 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
大学生就业求职信
2014/06/12 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
辩论会主持词
2015/07/03 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers