vue路由页面跳转不到子路由（记录）

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 前端 vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43622870/article/details/122325796
版权
前端 同时被 2 个专栏收录
13 篇文章 1 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

最近学用vue做项目，一开始就发现个问题
跳转不到子路由页面
在这里插入图片描述

搜了一下一般说路由页面要有<router-view/>来承载，也放了，还是不行
然后f12看看跳转报错
在这里插入图片描述
Cannot read properties of undefined (reading '$createElement')
再一搜，配置子页面时component写成了components
改好，ok

菜菜菜三菜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue项目中常见问题(15)三级联动组件的路由跳转与传参
qq_46368050的博客
05-15 1584
目录 gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 方法一:声明式导航router-link来替换a标签跳转(不推荐) 1. 点击后确实能够跳转到/search页面 2. 但是当你鼠标进入三级联动,上下滑动的时候,会出现卡顿现象! 方法二：编程式导航(一般方法) 1.绑定点击事件 2.给点击事件一个方法 3.点击后确实能够跳转到/search页面,而且也没有了卡顿的现象 4...
Vue路由切换页面不更新问题解决方案
10-15
主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue3 父路由调用子路由方法失败
Travrller的博客
03-18 636
实现功能：数据的查询选项在父页面中，而数据的显示在子页面中。并且子页面是父页面的子路由。实现对父页面的查询条件使子组件显示相应的数据。
Vue学习笔记-Router死活跳不过去子路由
qq_33518733的博客
12-06 1352
vue-router踩坑记录，死活跳转不到子路由上面去
【Vue】Router路由无法跳转问题整理
Sheldon74的博客
09-08 8502
Vue Router路由无效或异常等问题整理
vue3 父组件与路由子组件相互调用
pscool的博客
07-05 2581
Framework.vue中通过路由出口，展示了Main.vue组件，但是现在需要在Main.vue组件中去调用Framework.vue组件中的方法，可以有以下几种做法。
vue-router 父路由重定向到子路由加载问题
秋楓的博客
06-15 4146
最近在学习vue后找了一个vue-admin-template框架进行搭建和改造，发现一个地方，困恼了很久。
浅析＜router-view＞ v-slot事例
热门推荐
m13012606980的专栏
07-28 1万+
浅析 v-slot事例
vue3 vue-router嵌套两级路由时，每一级路由都使用transition+keep-alive时，二级路由之间切换离场动效正常，一级路由之间切换会导致离场的页面组件离场动效重复1遍
温温温B的博客
12-01 1509
vue3 vue-router嵌套两级路由时，每一级路由都使用transition+keep-alive时，二级路由之间切换离场动效正常，一级路由之间切换会导致离场的页面组件离场动效重复1遍
vue路由拦截及页面跳转的设置方法
08-27
主要介绍了vue路由拦截及页面跳转的设置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 实现路由跳转时更改页面title
10-16
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue路由跳转问题记录详解
08-30
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
router-view多级嵌套，导致经常路由更新了 但是页面并没有跳转
业余前端的职业经历
06-01 1127
问题我下面的路由还是懒加载的，我都严重怀疑 当我访问的时候 我的路由并没有加载出来，终究还是我太菜了， 因为随着项目的变大， 路由的地址也是越来越长。我也不知道为什么原因 所以我把路由的懒加载去掉之后 恢复正常了。关注我 持续更新前端知识。
Vue嵌套路由与默认子路由
世界和我们都不该止步于此
05-12 4697
什么是嵌套路由？ 嵌套路由就是在父组件中的子组件路由里面又嵌套了一层子（孙子）组件路由 就像这样： 在App主组件中有三个子组件使用路由的方式进行切换，以达到SPA功能 但同时又在子组件关于页面中又使用了一层路由实现了一个Tab栏切换的功能 这就是嵌套路由--- 目录 嵌套路由的使用 默认子路由 我们在使用嵌套路由的时候，大体操作和基本路由一致，需要注意的是要通过children属性来声明子路由规则 就像这样--- 嵌套路由的使用 在路由模块中我们先导入需要的组件 // 导.
vue父路由跳转到子路由时，路径变化但页面不改变，仍然为父页面的解决办法
前端小白, 稀土：雩风十六
07-09 3934
项目中遇到了这样一个问题：我想要从父页面跳转到子页面然后在父页面中通过进行跳转，想要的结果是跳转后父路由区域替换为子路由，但是实际结果却是路径改变了，面包屑也更新了，控制台里也显示触发了子路由的mounted钩子里的方法，但是页面仍然是父页面没有替换为子页面。
记录vue-router使用嵌套路由，子路由页面不显示问题
danny_799745061的博客
09-09 3050
记录vue-router使用嵌套路由，子路由页面不显示问题
Vue Router 子路由进不去
CSU_Zipple的博客
12-21 4075
检查一下子路由的路径是否带了根路径'/' 比如 children:[ { path:"/modify/:id", name:"modifyAddress", props:true, component:ModifyDetail },{ path:/"new", ...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 667
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3页面跳转到子路由页面
07-08
在Vue 3中，你可以使用Vue Router来进行页面跳转，包括跳转到子路由页面。以下是一种常见的实现方式： 首先，确保你已经安装了Vue Router，并将其配置到你的Vue应用中。 接下来，在你的路由配置文件（通常是`router/index.js`）中，定义你的路由和子路由： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/parent', name: 'Parent', component: Parent, children: [ { path: 'child', name: 'Child', component: Child } ] } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 在上面的例子中，我们定义了一个父级路由`/parent`，并在它下面定义了一个子路由`/parent/child`。 在你的父级组件中（例如`Parent.vue`），你可以使用`<router-link>`标签来创建一个链接到子路由的导航链接： ```html <template> <div> <h1>Parent Component</h1> <router-link :to="{ name: 'Child' }">Go to Child</router-link> <router-view></router-view> </div> </template> ``` 上述代码中，我们使用`<router-link>`将文本"Go to Child"包裹起来，并设置了`to`属性为`{ name: 'Child' }`，这将链接到我们在路由中定义的子路由。 最后，在你的子组件中（例如`Child.vue`），你可以按照需要进行渲染： ```html <template> <div> <h2>Child Component</h2> <!-- 子组件内容 --> </div> </template> ``` 这样，当用户点击父组件中的导航链接时，Vue Router将会自动加载并渲染子组件。 请确保你根据自己的项目结构和需求进行适当的调整。希望这个示例能帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜菜菜三菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值