当前位置 主页 > 网站技术 > 代码类 >

    vue的路由映射问题及解决方案

    栏目:代码类 时间:2019-11-10 21:02

    今天在项目中遇到了一个问题,明明在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
      }
     ]
    })

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家。