vue的路由映射问题及解决方案
今天在项目中遇到了一个问题，明明在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') },
];
然后整个文件路径如下图所示：
然后，路径啥的都有，结果死活进入不了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
}
]
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中使用keep-alive动态删除已缓存组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue向后端传数据后端接收为null问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue-router启用history模式下的开发及非根目录部署方法
这篇文章主要介绍了vue-router启用history模式下的开发及非根目录部署方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了vue中实现点击变成全屏的多种方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
这篇文章给大家详细的整理了Vue中实现路由跳转的三种方式,使用vue-router,声明式-router-link,编程式这三种方法,分别有详细的代码示例,需要的朋友可以参考下2023-09-09
本文介绍了Vue3 嵌套路由中使用 keep-alive缓存多层的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了在vue路由上添加公共的路由前缀方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
通过Vue 3,组合式API增强了我们利用Vue的能力,使我们的代码更具模块性和可读性,本文主要来和大家分享10个常用的Vue3组合式API,希望对大家有所帮助2024-01-01
在 Vue.js 中,我们可以通过自定义指令的方式来实现拖拽功能,使得代码更加模块化和可复用,本文将介绍如何基于 Vue.js 实现一个简易的拖拽指令,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要为大家详细介绍了vue增删改查的简单操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论