今天在项目中遇到了一个问题，显著在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），却写对了？

浅谈laytpl 模板空值显示null的解决方法及简单的js表达式，今天小编就为大家分享一篇浅谈laytpl 模板空值显示null的解决方法及简单的js表达式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，浅谈laytpl 模板空值显示null的解决方法及简单的js表达式

剖析问题

我想了一下，实在照样蛮有原理的，由于在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 路由跳转四种方式 (带参数)
• 简述vue路由打开一个新的窗口的方式
• vue.js使用watch监听路由转变的方式
• vue 解决addRoutes动态添加路由后刷新失效问题
• vue addRoutes实现动态权限路由菜单的示例
• 解决vue 路由转变页面数据不刷新的问题
• vue通过路由实现页面刷新的方式
• vue-router vuex addRoutes实现路由动态加载及菜单动态加载

  阅读全文