广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何解决vue中路由映射的问题
  • 470
分享到

如何解决vue中路由映射的问题

vue 2022-10-19 05:10:51 470人浏览 泡泡鱼
摘要

小编给大家分享一下如何解决Vue中路由映射的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在项目中遇到了一个问题,明明在Ro

小编给大家分享一下如何解决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') },
];

然后整个文件路径如下图所示:

如何解决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
  }
 ]
})

以上是“如何解决vue中路由映射的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: 如何解决vue中路由映射的问题

本文链接: https://www.lsjlt.com/news/73807.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何解决vue中路由映射的问题
    小编给大家分享一下如何解决vue中路由映射的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在项目中遇到了一个问题,明明在Ro...
    99+
    2022-10-19
    vue
  • 如何解决vue组件路由高亮的问题
    这篇文章给大家分享的是有关如何解决vue组件路由高亮的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用...
    99+
    2023-06-15
  • Vue路由history模式如何解决404问题
    小编给大家分享一下Vue路由history模式如何解决404问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!问题背景:vue-...
    99+
    2022-10-19
    vue history
  • 如何解决vue spa应用中的路由缓存问题
    这篇文章将为大家详细讲解有关如何解决vue spa应用中的路由缓存问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。单页面应用中的路由缓存问题通常我们在进行页面前后退时,...
    99+
    2022-10-19
    vue spa
  • MyBatis的SUM映射问题及解决
    目录SUM映射问题原因解决方式sum 返回映射问题(sum报表统计接口返回)MyBatis sum 返回值映射SUM映射问题 当我们根据类别进行统计,返回的数据类型为HashMap&...
    99+
    2022-11-13
    MyBatis映射 MyBatis的SUM映射 SUM映射
  • 如何解决vue-cli 默认路由再子路由选中下的选中状态问题
    小编给大家分享一下如何解决vue-cli 默认路由再子路由选中下的选中状态问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!vue-cli是Vue.js官方脚手架命令行工具,我们可以用它快...
    99+
    2022-10-19
    vue-cli
  • 如何解决vue路由守卫及路由守卫无限循环问题
    这篇文章主要介绍了如何解决vue路由守卫及路由守卫无限循环问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。先贴一波官方文档的内容const...
    99+
    2022-10-19
    vue
  • MyBatis的SUM映射问题怎么解决
    本文小编为大家详细介绍“MyBatis的SUM映射问题怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“MyBatis的SUM映射问题怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。SUM映射问题当我...
    99+
    2023-06-29
  • Vue路由自动添加#的问题及解决
    目录Vue路由自动添加#Vue路由去除 链接 / 前面的 #Vue路由自动添加# 在使用VueRouter时,配置了几个路由规则 尝试在浏览器中输入路由地址(/order,/per...
    99+
    2022-11-13
    Vue路由 路由自动添加# Vue路由添加#
  • vue中怎么解决跨域路由冲突问题
    今天就跟大家聊聊有关vue中怎么解决跨域路由冲突问题,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。vue 简介Vue.js(读音 /vjuː/, 类...
    99+
    2022-10-19
    vue
  • Vue中的动态路由匹配路由问题
    目录vue-router 动态路由匹配总结vue-router 动态路由匹配 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。 例如,我们有一个 User 组件,对于所有...
    99+
    2022-12-09
    Vue动态路由 Vue匹配路由 Vue路由
  • vue组件的路由高亮问题解决方法
    前言 之前我对于路由的高亮都是使用缓存,给他的所有路由遍历一遍,每点击一下的时候,给他的当前值高亮,赋值active。后来发现一刷新就不行,高亮的就变成默认值0了,这里主要是讲这个问...
    99+
    2022-11-12
    vue路由高亮 vue高亮
  • 解决resultMap映射数据错误的问题
    目录resultMap映射数据错误解决方案【报错】resultMap认知错误附图(修改过后的)resultMap映射数据错误 mapper文件使用了resultMap进行一对多关系映射,不管怎么配置(没有问题)SQL语句查询出来的结果,和调...
    99+
    2020-12-04
    resultMap映射数据 映射错误
  • 如何解决vue-router路由参数刷新消失的问题
    这篇文章主要为大家展示了“如何解决vue-router路由参数刷新消失的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决vue-router路由参数刷...
    99+
    2022-10-19
    vue router
  • 解决Mybatis映射文件mapper.xml中的注释问题
    目录Mybatis映射文件mapper.xml的注释问题报错信息解决办法mapper.xml文件中的注释注释方式‘无效的列索引’bug和解决小结一下Mybat...
    99+
    2022-11-12
    Mybatis映射 Mybatis映射文件 mapper.xml注释
  • vue跳转同一路由报错的问题及解决
    目录vue跳转同一路由报错编程式路由跳转多次点击报错问题问题分析解决方法总结vue跳转同一路由报错 vue中,如果跳转同一个页面路由,虽不会影响功能,但是会报错 原因:路由的pus...
    99+
    2023-05-14
    vue跳转同一路由报错 vue跳转路由报错 vue跳转路由
  • 如何解决Vue相同路由不同参数的刷新问题
    这篇文章给大家分享的是有关如何解决Vue相同路由不同参数的刷新问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在使用vue和vue-router开发spa应用时,我们会遇到这样...
    99+
    2022-10-19
    vue
  • 如何解决Vue路由this.route.push跳转页面不刷新的问题
    这篇文章主要讲解了“如何解决Vue路由this.route.push跳转页面不刷新的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决Vue路由this.route.push跳转页面...
    99+
    2023-06-20
  • 如何解决iView-admin动态路由问题
    这篇文章将为大家详细讲解有关如何解决iView-admin动态路由问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 IView-admin 在使用的时候跳转客...
    99+
    2022-10-19
    iview admin
  • thinkphp路由不转换问题如何解决
    这篇文章主要介绍“thinkphp路由不转换问题如何解决”,在日常操作中,相信很多人在thinkphp路由不转换问题如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”thinkphp路由不转换问题如何解决...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作