Vue-router踩坑之旅（3）

最新推荐文章于 2024-08-24 19:56:05 发布

YQ___QY

最新推荐文章于 2024-08-24 19:56:05 发布

阅读量456

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_39168052/article/details/80966075

本文介绍在Vue项目中如何使用vue-router进行单页面多路由配置，包括router-view的name属性设置、components多组件路由配置、redirect重定向及alias路由别名等关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-router 单页面多路由操作时，app.vue中router-view应该分别取name值；

router下index.js文件内配置路由时的component此时应该改为components;

redirect重定向直接改变路径值；

alias别名没改变地址；

模板内写路由：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YQ___QY

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

nuxt.js 踩坑之旅，layout/default.vue

人生代码 ---- 公众号

08-15

1726

最主要的就是标签，在 nuxt.js 服务端渲染的过程中，需要使用类似于 vue 中的 router-view 也能使用 keep-alive 属性 :keep-alive-props="{ include: ['index', 'search', 'benifit'] }" 整体代码如下： <template> <div class="index-wrapper"> <div class="index-content"> <div

同一个页面点击不同按钮到列表页面，是否缓存的问题踩坑之旅

qq_36765732的博客

12-16

469

需求提了这样一个要求，当我们从列表页跳转到（详情页面，修改页面，新增页面）时，点击（详情页面，修改页面，新增页面）上面的返回按钮，可以回到列表页面，并且需要缓存最初的列表页面条件与页数。对于这种情况，第一想到的解决办法是在路由列表里面加上keepAlive属性，如下图这样在列表里面缓存问题确实解决了，但是出现了个问题，如果不是从返回按钮进入到列表页面的，我们是不需要缓存的，需要重新调接...

参与评论您还未登录，请先登录后发表或查看评论

vue路由报错

小楠子的博客

08-29

410

今天遇到了一个从没有遇到过的问题，点击菜单时，控制台一直在报错。报错内容如下： Uncaught (in promise) NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}；重新下载一下vue-router的包即可，npm i vue-router@3.0-S即可 ...

学习vue框架，遇见router-view标签无法显示的问题解决

qq_32262049的博客

04-05

3914

学习demo案例中，使用router-view标签，痛心疾首的遇见过两次，router-view标签无法显示的问题。根据出现的错误，总结了出现的几个问题。 1.要么是url中没有匹配上，要么是component写错了。 2.router路由的配置写错了。没有报错，单词或者符号写错希望警醒一下！

router-view不显示原因踩坑

m0_46678809的博客

09-28

608

router-view不显示

[Vue Router warn]: No match found for location with path “xxxxx“

weixin_39962208的博客

09-21

1万+

控制台警告[Vue Router warn]: No match found for location with path "xxxxx"的处理办法

vue3 addRoute 动态路由页面刷新后路由失效 [Vue Router warn]: No match found for location with path

热门推荐

ZHANG_666

05-12

4万+

vue-router 4.0 取消了 addRouters 设置动态路由只能使用 addRouter 动态路由一般是从后端获取然后经过数据格式处理但在页面刷新后会出现一下警告： vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path “/formlist/stepform/other” 但通过getRouters又能够获取到所有的异步路由分析:页面刷新后由于是异步获取的原

vue 地图使用navigator_weex踩坑之旅第五弹 ~ 使用navigator内置模块实现导航

weixin_34374684的博客

02-22

1107

目前，我个人认为在weex中实现页面跳转的方式有两种，一种是通过weex提供的navigator模块，一种是通过vue-router之类的第三方插件。这两种方式在开发过程中都需要。那么什么时候采用navigator,什么时候采用路由？可以根据开发需求来决定，底部导航可以使用使用路由。页面中特殊功能，比如个人设置，添加地址等功能可以使用navigator。那么这两种方式如何共存于代码中，需要修改we...

【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践

xxxzzzqqq_的博客

03-15

3070

预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

从零搭建一个vite+vue3+ts规范基础项目

qq_41559229的博客

05-27

1825

最简单的vite+vue+ts的配置，虽简单但详细！

解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx

最新发布

kcorgi的博客

08-24

2524

当我们在使用vue-Route4.0以前的版本的时候，我们采用的404错误页面的路径，是用router.addRoutes或者push动态添加进去的。但是vue-Route4.0版本更新以后，刷新页面或者第一次访问动态的路由，全局守卫beforeEach执行。但是这时候我们还没有动态追加路由，找不到，而且我们是后续追加的404，从而导致第一次路由的matched为空。vue-Route4.0版本已经不需要我们去动态添加404路由了。这样刷新后会跳转至404页面，不会留在刷新前的页面。

解决[Vue Router warn]: No match found for location with path “/day“问题

Mr__proto__的博客

07-28

3888

vue-router警告[Vue Router warn]: No match found for location with path "/day"问题

vue3 vite动态路由的问题

warrah 南极狼

12-15

1501

今天调试发现tomatch为空，是因为matchMap中key有相同的名字。菜单名称不重复，问题就解决了。下面是动态路由的主要代码,这里不要用eager，因为那个是同步的。因此按照下方编写即可。客户期初余额新增、编辑无法跳转，但是最有一个供应商期初余额却可以，甚是奇怪。加下面的代码，是解决不了问题，因为它只是转向了404页面。

使用Vue3.0 刷新页面警告 [Vue Router warn]: No match found for location with path ‘‘/xxx‘‘

m0_56683897的博客

04-07

2417

vue-Route4.0版本已经不需要我们去动态添加404路由了，直接在router/index.ts文件中添加一个404路由即可，使用通配符匹配。值得注意的是，添加的路由不要加上name：’404‘，这样刷新后会跳转至404页面，不会留在刷新前的页面。

微人事 vue-roter4实现动态加载路由，解决[Vue Roter warn]: No match found for location with path “xxx“

qq_41725131的博客

11-28

1万+

目录一：使用router.addRoute()代替router.addRoutes()二：修改组件引入方式三：修改路由中重复的name值最近在做微型人事项目，进行到左边导航菜单动态加载部分，前端所有的子项都无法打开以基本资料为例，点击会在控制台弹出如下警告信息：教程中src/utils/menus.js内的initMenu方法从后台请求得到动态的菜单栏数据data，使用formatRoutes方法将data中的“component”对应的字符串数据转化为.vue组件。教程代码： import {

解决nuxt3本地开发代理报错[Vue Router warn]: No match found for location with path “/api/article/page“

weixin_42630688的博客

03-13

2448

请求中设置ssr:false，接口只在客户端渲染没问题，但是我的页面需要再服务端渲染。之前使用nuxt2没有遇到过这种问题，代理请求怎么跑到匹配路由上了，很懵逼。配置一下toureRules的代理就可以了。本地开发中配置了接口了接口代理。但是在服务端渲染的过程中会报错。

解决：vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: me

愿我如星君如月 ... 夜夜流光相皎洁 ...

12-12

5630

1. 报错如题： vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: menu 2. 报错原因：我写了个 vue文件，命名为 “ menu.vue” , 报错原因是我取的这个名字和 VUE 已有组件名字相冲突。感觉类似 java 的保留关键字，或者是数...