如何解决vue中路由映射的问题-创新互联
小编给大家分享一下如何解决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中路由映射的问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文标题：如何解决vue中路由映射的问题-创新互联
文章位置：http://myzitong.com/article/dchjgj.html