为什么VueJS不在html中显示我的嵌套路由？

VueJS不在HTML中显示嵌套路由的原因可能有以下几个方面：

未正确配置路由：在使用VueJS的嵌套路由时，需要正确配置路由表。确保在父级路由中设置了子路由，并且在子路由中指定了对应的组件。
未正确使用路由占位符：在HTML中显示嵌套路由时，需要在父级组件的模板中使用 <router-view> 标签作为占位符，以便子路由的内容能够正确显示。
组件未正确引入：确保在路由配置中引入了对应的组件，并且组件的路径和名称正确无误。
路由路径匹配问题：检查路由路径是否正确匹配，包括大小写、斜杠等。
组件未正确注册：在使用VueJS时，需要将组件正确注册到Vue实例中，以便能够在路由中使用。

如果以上步骤都正确无误，但仍然无法在HTML中显示嵌套路由，可能是由于其他代码逻辑或配置问题导致的。建议检查浏览器控制台是否有报错信息，以及进一步排查代码中可能存在的问题。

对于VueJS的嵌套路由，腾讯云提供了云开发服务，其中包括云函数、云数据库等功能，可用于构建基于VueJS的全栈应用。您可以参考腾讯云云开发的相关文档和产品介绍，了解更多关于VueJS在云计算领域的应用场景和推荐产品。

腾讯云云开发产品介绍链接：https://cloud.tencent.com/product/tcb

相关·内容

Vuejs开发过程中一些常见问题的解决方法

7.路由嵌套路由嵌套会将其他组件渲染到该组件内，而不是进行整个页面跳转router-view本身就是将组件渲染到该位置，想要进行页面跳转，就要将页面渲染到根组件，在起始配置路由时候写到： var App...例如实现当输入框中什么都没写的时候显示字符串‘empty’,否则显示输入框中的内容，代码如下： <input type="text" v-model="inputValue...$remove(item); 2.检测对象受ES5的显示，Vuejs不能检测到对象属性的添加或删除。...这个我在demo中的dataBind.vue中用到。...绑定事件在HTML中用v-on:click-"event",这时evet的名字不要出现大写，因为在1.x中不区分大小写，所以如果我们在HTML写v-on:click="myEvent"而在js中写myEvent

6.5K3 0

vue-router详解及实例

具体ngix、Apache、node等配置参考：「https://router.vuejs.org/zh-cn/essentials/history-mode.html」这里说一下本地webpack需要增加的配置情况...一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航守卫中的路有对象）的 $route.matched 数组。...导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。该方式会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。...我们可以在接下来的组件内的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。滚动行为只在 HTML5 history 模式下可用。...base相关说明：「https://router.vuejs.org/zh-cn/api/options.html#base」实例 header编写第一步：获取router的全部配置信息import

2.8K3 1

6.vue-router之命名路由和命名视图

前言：前面我们把动态路由、嵌套路由等讲完了，说道完命名路由和命名视图，vue-router的基本使用方法就算是完篇了，还想仔细探究的同学可以去官网翻阅，加深理解。...① 官方文档的解释：https://router.vuejs.org/zh/guide/essentials/named-routes.html 就是在routers配置路由名称的时候给路由定义不同的名字...name属性命名然后我们再到test.vue页面中，敲： ? test.vue 这时候我们去浏览器中点击，就发现用另一种方式实现了和普通路由跳转、编程式路由跳转一样的效果： ?...跳转 2.再来说说什么是命名视图 ① 官方文档就说的很好嘛（https://router.vuejs.org/zh/guide/essentials/named-views.html）简单来说就是，...ps：今天周一，早上有点犯困，感觉这章写的不是很通俗易懂，没办法没办法，哪里错了欢迎留言指出来一下；然后就是这章内容其实我个人觉得有点鸡肋，食之无味弃之可惜，一般在项目中还是用前两章编程式路由、动态路由什么的比较多

8761 0

Vue 嵌套路由使用总结

参考链接： https://router.vuejs.org/zh/guide/essentials/navigation.html https://router.vuejs.org/zh/guide/...children实现路由嵌套。...个人理解，嵌套路由控制内容子组件内容的展示区：实现父组件的内容展示区保持不变，子组件内容展示区动态变化。 2、同this....注意，这里path是否为绝对路径，不影响是否嵌套路由，是否嵌套路由，是通过children决定的，只是影响路由匹配。...），添加元素 2、 router/index.js中给父页面路径所在的路由，添加子路由：子组件的加载url对应的路由

1.2K2 0

Vue路由vue-router的基本使用

前端路由:对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash...vue-router官方文档：https://router.vuejs.org/zh/ vue-router安装文档：https://router.vuejs.org/zh/installation.html...那么下面点击登陆这个span也是可以跳转组件的，如下： ? 说明router-link不管被渲染为什么html标签，都具有跳转页面的效果。重定向rediect的使用 1.存在的根路径问题 ?...router-link设置高亮显示在日常的菜单中，一般都会对选中的菜单设置高亮的效果，表示已经选中了这个菜单，那么在router-link中该如何设置这个效果呢？...// 我们晚点再讨论嵌套路由。

2.3K2 1

深入分析Vue-Router原理,彻底看穿前端路由

在beforeCreate钩子中做了很重要的一步,判断根 Vue 实例上是否配置了router,也就是我们经常用main.js中的路由的注册。...我认为就是router-view的注册函数,_parentVnode是实例的虚拟父级节点,需要找到父级节点中的router-view。...如果不懂pushState可以阅读我的一篇文章。...最后通过调用base.js中的基础类中的transitionTo方法通过this.router.match匹配到路由之后，通知路由的更新....参考资料 [1]vue-router: https://router.vuejs.org/zh/ [2]函数式组件: https://cn.vuejs.org/v2/guide/render-function.html

2K2 0

企鹅社区移动版Vue2.0升级手记

VUE：https://cn.vuejs.org/v2/guide/migration.html Vue Router：https://cn.vuejs.org/v2/guide/migration-vue-router.html...通过实践，我总结了几点在整个过程中遇到的难点和我的解决思路： 1、HTML插值变化，移除了{{{value}}}语法在1.0中，需要格式化显示HTML内容时（用来处理换行转及一些允许使用的特殊字符...当然，我也尝试了一下测试结果没有得到想要的，所以放弃了这种做法。...缺点是在组件嵌套时，需要单独引入组件。...（有些路由我是不希望被缓存的），这也是我感到不够灵活的地方。

5.8K0 0

Vue-Router学习笔记，持续记录

Vue Router 官方文档：https://router.vuejs.org/zh/api/、https://router.vuejs.org/、https://nicen.cn/vue.html（... 访问当前路由路由过程中被隐藏的组件会被销毁（keep-alive下的组件将会被保留）； 2.嵌套路由（多级路由） router-view标签内，显示的组件同样可以包含router-view标签和使用路由...路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录，一个路由匹配到的所有路由记录会暴露为 route 对象 (还有在导航守卫中的路由对象) 的 route.matched 数组。...因此，我们需要遍历 https://router.vuejs.org/zh/guide/advanced/meta.html 路由配置对象 Vue-router API：https://router.vuejs.org...在数据获取期间显示“加载中”之类的指示。 2.导航完成之前获取导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

9.1K4 0

Vue

在 2.2.0 及其更高版本中，activated 和 deactivated 将会在树内的所有嵌套组件中触发。主要用于保留组件状态或避免重新渲染。 html <!.../router.vuejs.org/zh/ $route 当前路由信息 $router 操作路由 html <!...home 组件的中知识补充：此时，我们需要借助嵌套路由: https://router.vuejs.org/zh/guide/essentials/nested-routes.html 嵌套路由(...var zi = { template: "我是嵌套路由的组件" }; // 2:获取路由对象 var router = new VueRouter({...；路由懒加载： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html 路由懒加载的工作就是在打包时，将路由文件分离出来，在请求时，需要哪个路由

6.4K4 1

【转载】vue 3.x 如何有惊无险地快速入门 —— 一文扫遍 vue2 与 3 的差异点

/zh/api.html teleport 组件 teleport 组件它只是单纯的把定义在其内部的内容转移到目标元素中，在元素结构上不会产生多余的元素，当然也不会影响到组件树，它相当于透明的存在。...为什么要有这个组件？为了有更好的代码组织体验。比如：有时，组件模板的一部分在逻辑上属于此组件，但从技术角度来看(如：样式化需求），最好将模板的这一部分移动到 DOM 中的其他位置。...可能你会说很多 UI 库不是都已经是这样的实现了的吗？至于这个 UI 库是如何实现的，我猜应该是直接操作 DOM。为什么还要提供这个 teleport 组件呢？...加载异步组件，在异步组件加载完成成并完全渲染之前 suspense 会先显示 #fallback 插槽的内容。...一些全局的 api 方法也不在全局上了，而是放到了实例上。

1.9K5 0

4.vue-router之什么是嵌套路由

上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。 GitHub：https://github.com/Ewall1106/mall 1.嵌套路由的使用场景是什么呢？...大家都知道选项卡，在选项卡中，顶部有数个导航栏，中间的主体显示的是内容；这个时候，整个页面是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，这个时候就是路由中嵌套路由。...title2.vue ② 现在我们在router 》 index.js 中将这上面两个新建的组件引入进来并填写路径，这里的Title1和Title2是作为test.vue页面的子路由，所以要写在children...路由配置这里需要提个醒的就是填写children子路由的path不要加/ ③ 然后我们再去到test.vue中敲：在这里提个醒，在to后面写路由路径的时候，一定到带上绝对路径，也就是要把test这个父路由路径写进去...test.vue ④ 最后我们进入浏览器点击不同的标题就可以看到不同内容的展示 ? localhost ? 点击标题参考学习 https://router.vuejs.org/zh-cn/

6132 0

【学好】前端新人如何能把框架学好？

这个问题是咱们学习群里的同学问我的，就是说，基本的js、html、css都ok啦，但前端框架要怎么学习会进度比较快呢？比较笼统的回答当然是要多写多看多练。但是，怎么样做会进度快一点呢？...所谓的extends无非是prototype的变形、所谓的Promise无非是把嵌套拉直为一串.then、所谓的generator、yield无非是函数分段执行...） <!...而是要以框架的“核心”为圆心，通过一些小例子，先掌握一些常用方法，再向外辐射着的去学习、去看。例如，我已经掌握一些html、css、js了。那么，VueJs，我会怎么学？...那么我第一步就是，“先在页面上，使用vueJs显示个什么东西出来”，例如一行字。那我怎么显示呢？“字”是什么？其实是数据。那就变成了，怎么把数据显示在页面上。...这是所有前端框架的底层； 2、从业务、需求的层面。为什么有了jQuery之后，又有了reactjs？为什么再之后又有了VueJs？

6532 0

vue-router 详解

大家好，又见面了，我是你们的朋友全栈君。...8、路由懒加载 9、嵌套路由实现 10、传递参数的方式 11、导航守卫的使用 12、TabBar实现思路 ---- 1、认识vue-router 目前前端流行的三大框架，都有自己的路由实现： Angular...我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/ vue-router是基于路由和组件的路由用户设定访问路径的，将路径和组件映射起来。...但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以。如何可以让路径默认跳转到首页，并且渲染首页组件呢？...创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157463.html原文链接：https

1.8K2 0

手摸手Element-ui路由VueRoute

后端WebAPI准备 https://router.vuejs.org/zh/guide/ https://v3.router.vuejs.org/zh/installation.html <template...wue- router是官方的路由插件,能够轻松的管理SPA项目中组件的切换 Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。...Vue-router目前有3x的版本和4x的版本, Vue-router3x只能结合vue2进行使用安装npm install vue-router@3 Vue-router4x只能结合Vue3进行使用...component: helloworld}, { path: '/data', component: data}, //通过children属性，嵌套子路由...我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

1430 0

Markdown 拓展-使用 vue.press 生成网站

每个 Markdown 文件都通过 markdown-it在新窗口打开编译为 HTML ，然后将其作为 Vue 组件的模板。...在构建过程中，我们会为 VuePress 站点创建一个服务端渲染 (SSR) 的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML 。...当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。...此时，你的 Markdown 文件对应的路由路径为：相对路径路由路径 /README.md / /contributing.md /contributing.html /guide/README.md...yarn docs:dev 只是便于调试，例如我试了站点配置我修改了 lang 和 description 字段，但是只有构建产物后这两个家伙才生效。

1.4K1 0

WEB前端零基础课-1022本周总结

主要就是vue vueJs,它是基于组件化开发，单项数据流，只负责view层。...vueJs,有很多指令，比如说： v-html,输出html内容 v-bind,用于绑定一些属性之类的 v-model,双向绑定 v-if,根据true或是false,来决定是否插入到页面当中，dom节点...，不在页面中 v-show,根据true或是false,来决定是否在页面中显示，dom节点已经在页面中，只是隐藏 vue的事件 v-on:click="事件名" 可以简写成 @click="事件名" ....，就是封装好的一个函数，通过vue的语法来调用使用方法，v-指令名 vue-cli脚手架全局安装 npm install -g vue-cli vueJs在vue-cli里面的文件烈性是 .vue的...，同步操作的不能直接调用它，要用store.commit()来提交mutations -actions,提交mutations的，必须用dispatch来触发异步操作做了啥各个demo和路由，

1.1K1 0

在 Vue.js 中使用嵌套路由

随着 Vue.js 单页应用（SPA）变得相当复杂，你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。...让我们创建一个相对简单的用例，来展示 Vue Router 中嵌套路由的实用性。...将其作为样式表文件添加到 public/ 文件夹中，并在 public/index.html 中引用它。...对 App.vue 中的 HTML 标记和 CSS 样式进行以下修改。...当你希望在网站和应用上显示更多特定类型的数据（用户、图片等）时，此功能非常有用。原文链接 https://alligator.io/vuejs/nested-routes/

1.5K0 0

SpringBoot+Vue（二）ES6模块化、SPA-Vue企业级开发和Vue全家桶

使用路由的时候携带参数 3.8.3.3 跳转的组件页面获取参数 3.8.4 总结 3.8 嵌套路由（很重要！！！！！！...我是 {<!...2 路由的二种使用方式 3.3.3 体验 3.3.3.1 路由方式介绍当我们定义好路由之后，我们就可以在页面中添加按钮跳转到相应的路由，有两种跳转方法： 1、在 HTML 中使用 router-link...router-view 标签所在的位置上： 1、默认显示路由配置中的第一个路由，也就是 / 路由 2、当切换路由时，也是在这个标签的位置上切换路由因为我们在 router.js 文件的路由是这样配置的...掌握） 3.7.1 目标掌握嵌套路由的使用 3.7.2 路径创建两个页面HelloJack.vue和HelloTom.vue 配置路由编写Hello.js页面测试嵌套组件的关系 3.7.3 体验

7751 0

Vue2向Vue3过渡，持续记录

只读代理是深层的：任何被访问的嵌套 property 也是只读的。...的改变官方文档：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E4%BD%BF%E7%94%A8-v-bind-sync 在 3.x 中，...在Vue3中，如果当前组件的setup使用了async/await，那么其调用组件的父组件（父组件中引用defineAsyncComponent定义异步组件）的外层需要嵌套一个suspense标签异步组件不需要作为...什么时候拆分路由？很多功能相互独立、没有关联的时候拆分路由 2. 什么时候拆分组件？.../Foo.vue') 提示 vue简单的小组件就别用异步组件了，会导致加载闪烁（网页显示，然后等待网络加载，才显示） 37.关于vue3中的v-model 在原生html元素上使用

5.7K4 0

浅析 vue-router 源码和动态路由权限分配

小结 createMatcher: 根据路由的配置描述建立映射表，包括路径、名称到路由 record 的映射关系, 最重要的就是 createRouteMap 这个方法，这里也是动态路由匹配和嵌套路由的原理...这种模式用户在登录之后不会在 history 存放记录不存在 JWT 令牌路由在白名单中: 正常访问 /xxx 路由不在白名单中: 重定向到 /login 页面结合框架源码分析下面结合 vue-element-admin...的源码分析该框架中如何处理路由逻辑的。...控制路由对应的组件的渲染情况，并且支持嵌套。...当然这篇文章是有缺陷的，有几个地方都没有分析到，比如导航守卫实现原理和路由懒加载实现原理，这一部分，我还在摸索当中。

4.6K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云