vue嵌套（多级）路由的两个坑

最新推荐文章于 2022-11-24 19:07:35 发布
最新推荐文章于 2022-11-24 19:07:35 发布
阅读量914 收藏 2
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stead_fast/article/details/119802821
版权
本文介绍了在Vue中实现多级嵌套路由时遇到的两个主要问题：1) 子级路由的path不应以'/'开头，否则可能导致组件无法找到；2) 路由入口必须为完整路径，否则组件可能无法正常显示。通过理解这些问题并正确配置，可以确保多级路由的顺利应用。
摘要由CSDN通过智能技术生成

找不到组件的两个坑

1.子级路由path不能加/，否则会找不到组件
2.路由入口要写完整路径，否则会找不到组件

使用children配置项配置子路由规则

export default new VueRouter({
   
    routes:[
        //一级路由规则
        {
   
            path:'/about',
            component:About
        },
最低0.47元/天 解锁文章
慕宁儿
关注
专栏目录
vue填坑系列之嵌套路由的使用
xuxinwen32的博客
03-05 493
开发的时候有时候会遇到一种情况，比如 ：点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，但是，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。 需求我们需要当点击相应链接跳转到相应组件，页面不刷新 出现此问题的根本原因是是没有进行路由视图渲染，这是最重要的标签，用来显示跳转的页面，不加此标签，不会...
Vue笔记 基本路由 嵌套（多级）路由及实例代码
qiaoyangla的博客
04-08 2285
一、基本路由 1、基本使用 （1）安装vue-router,命令 npm i vue-router （2）应用插件：Vue.use(VueRouter) 在main.js文件中修改： import Vue from 'vue' import App from './App.vue' //引入插件 import VueRouter from 'vue-router' //引入路由器 import router from './router' Vue.config.pr
关于vue路由嵌套遇到的坑~
adz41455的博客
10-16 273
关键在于子路由中的path问题，path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/vue-2.4.0.js"&gt...
vue-router 配置多级路由时的踩坑记录
cscscssjsp的博客
09-27 2878
1.在router.ts内，只有根路径使用 '/' 就可以，二级路由以及三级都写在children下，二级路由可以配置'/'，配置后是也是一个根路由，和'/'是同级的 router/index.ts import Vue from 'vue'; import VueRouter, { RouteConfig } from 'vue-router'; import home from '../views/home' import product from '../views/product' impo
Vue嵌套路由踩坑-Component template should contain exactly one root element.
xiaozhuzhuyang的博客
03-17 467
主题：Vue嵌套路由踩坑-Component template should contain exactly one root element. vue-cli嵌套路由案例 报错信息： 先看这个工程的代码： 工程目录结构： main.jsp import Vue from 'vue' import App from './App' //扫描router路径下的所有组件 import router from './router'; //导入 element-ui 的组件和css样式sass impor
Vue-router多级路由基本操作（合理解决多个嵌套的公共页面）
weixin_43575792的博客
03-04 5027
Vue-router多级目录基本操作前言一、操作步骤1.router配置2.router-view使用总结 前言 最近在项目中遇到了一个新需求，虽然通过router一级路由也可以实现最终效果，但会导致代码冗余过多，不利于模块化，由此决定学习并使用Vue-router多级目录 一、操作步骤 1.router配置 首先，我们要在项目中建立router文件夹，并在里面创建好index.js，以博主的需求举例子，项目里有两个一级目录，登录和展示，展示页下有三个小目录 以下就是博主的index.js配置，在一级目
vue动态路由实现多级嵌套面包屑的思路与方法
08-29
在Vue.js应用中，动态路由和面包屑导航是常见的需求，尤其在构建多级嵌套的Web应用时。本文将详细介绍如何使用Vue Router实现动态路由并构建多级嵌套的面包屑导航。首先，让我们理解动态路由的概念。动态路由允许...
基于vue-router 多级路由redirect 重定向的问题
10-18
在 vue-router 中配置多级路由并进行重定向，需要仔细处理每个级别的路由配置，确保路径书写正确且符合实际项目需求。当遇到重定向问题时，应根据具体情况分析可能的错误原因，如路径错误、参数传递不当等，并通过...
Vue三层嵌套路由的示例代码
08-27
本篇文章主要介绍了 Vue 三层嵌套路由的示例代码，通过这个示例代码，我们可以学习如何在 Vue 中实现三层嵌套路由。下面，我们将逐步讲解这个示例代码的各个部分。 首先，我们需要了解什么是嵌套路由。在 Vue 中，...
vue2.0嵌套路由脱坑-解决
m0_37742411的博客
08-14 379
备注:1.使用vue-router的子路由，需要在父组件利用router-view占位         2.要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径   官方文档地址:https://router.vuejs.org/zh/guide/essentials/nested-routes.html...
vue怎么嵌套多级路由页面打不开_vue-router 多层嵌套 空子路由问题
weixin_29083373的博客
01-12 1610
问题是这样的，嵌套了三层路由想路由匹配到第一层的时候可以同时渲染第二层路由跟第三层路由的组件但是现在访问第一层路由的时候，只渲染了第一层跟第二层的组件，第三层的没有渲染出来上代码(路由设计，就不上组件代码了(太多代码了)，给路由地址访问都是没问题，用的是渲染组件)：{path: '/level1',component: level1,meta: {name: 'level1',requiresAu...
vue-router 嵌套路由注意点
10-14 339
注意下面几点： 1、 在组件中，我们可以通过 $route.params.id 来获取到user/小明/post 中的小明，这样，我们就可以进行个性化的设置了。 2、以 / 开头的嵌套路径会被当做根路径， 这可以让你充分的使用嵌套组件而无需设置嵌套的路径。 也就是说： 我们在children下，写path: "profile", 就相当于拼接成了 /user/:id/profile ，当然，我们也可以直接写为 path: "/user/:id/profile" ，最终的结果是一样的，但是我个人认为后者
组件之间相互嵌套调用导致组件注册名找不到报错
qq_40042861的博客
05-11 454
场景: 存在A、B、C三个组件，A有调用B，B有调用C，C会调用自身，同一个子组件被多次调用，就导致控制台抛错 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option. 解决方案： 注册全局组件： 1、在components文件夹下创建layoutModule组件 &lt
Vue模板中一个很隐蔽的坑
fictiony的专栏
11-24 348
Vue组件模板在重新render时有个很隐蔽的坑，严重时可能会导致界面明明没什么变化，但性能却明显下降，你想知道是什么坑么？
Vue 命名路由 和 嵌套路由（子路由）采坑
默默地博客
12-04 1938
Vue 命名路由 和 嵌套路由（子路由）配置时采坑。 错误路由配置入下： let router = [ ... ... { path: "/about", name:'about', // 命名路由 components: { default: about, navs: Navs ...
vue-入坑--嵌套路由 导致 页面跳转 为空问题（子页面内容不显示）
lzhzlm的博客
06-06 8552
vue-入坑–嵌套路由导致页面跳转为空问题（页面不显示内容） 遇到的问题 使用嵌套子路由切换页面，地址栏有变化，但是子页面内容没有显示（一片空白）。 上代码~~ 嵌套子路由代码 src->router->index.js //... import Detail2 from '@/components/Detail2' import Details from '@/components/Details' //... export default new Router({ // 去掉 http
vue路由踩坑之路
psd_html的博客
07-15 2514
vue路由踩坑vue-router是我们在使用vuejs做项目时很大几率会用到的技术，之前用的比较浅，没有发现什么问题，但是后来遇到一个路由嵌套的问题，踩进去了。再次写下笔记记录 vue-router在使用路由嵌套的时候。一般情况下使用两层路由嵌套是很少会出现问题的。那么我不再描述路由的基本用法。我记录的是三层以上路由嵌套需要注意的问题 加入说我们有这样的一个需求， // 一个路由根组件app
vue子路由的一个坑
诗水人间
01-03 1215
路由信息如下 下面是错误的路由 export default new VueRouter({ routes: [ { path: '/', children: [ { path: 'login', component: Login } ] } ]
vue3 多级路由嵌套 跳转
最新发布
09-24
Vue3 中的多级路由嵌套是指在一个项目中配置有多个层级的路由结构，通常用于管理复杂的导航层次，例如网站的不同页面或功能模块。在 Vue Router v4 中，可以使用 `children` 属性来实现多级路由嵌套。下面是一个简单的例子： ```json // router/index.js { path: '/parent', component: ParentComponent, children: [ { path: 'child1', component: Child1Component }, { path: 'child2', component: Child2Component, children: [ { path: 'grandChild', component: GrandChildComponent } ] } ] } ``` 在这个例子中，`/parent` 是父路由，它有两个子路由 `child1` 和 `child2`。当你点击 `child2` 后面的 `grandChild`，实际会跳转到 `/parent/child2/grandChild`。 跳转时，你可以使用 `this.$router.push` 或者动态路由名、路径参数等。例如： ```javascript // 在某个组件内 this.$router.push('/parent/child1'); // 直接跳转到一级子路由 this.$router.push({ name: 'grandChild', params: { parentId: 'child2' }}); // 使用动态路由名称和参数 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值