为什么在vue中使用嵌套路由没用

最新推荐文章于 2023-09-20 16:58:11 发布
最新推荐文章于 2023-09-20 16:58:11 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hejiaying68/article/details/102371348
版权

1、检查在router目录下的index文件中是否配置了

path:'XXX'，component:XXX, children:[

{path:'BBB', component: BBB}

]

如果采用如上写法，那么如果你要同时访问XXX和BBB的话，需要访问到路由地址：/XXX/BBB

如果你想通过访问/XXX就能查看到XXX下嵌套BBB的页面，那么就需要把BBB的path改为‘’

2、在XXX的页面中，必须要有<router-view></router-view>

否则在访问了/XXX页面时，只会加载XXX页面，而不会再去寻找到BBB页面

yoyo--
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue-router 嵌套路由没反应的问题
10-14
主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3-element-admin三级路由嵌套问题
最新发布
大石化鸟的博客
10-18 528
vue3-element-admin三级路由嵌套问题
vue route路由嵌套不起作用
m0_47531829的博客
07-28 827
vue route路由嵌套不起作用
vue-router4.0动态路由失效问题
壮乡码农
12-02 1万+
问题描述： vue-router4.0 版本在beforeEach使用addRouter动态添加路由后，路由没有生效。控制台发出警告[Vue Router warn]: No match found for location with path "/home"，使用roter.getRoutes()查看已经挂载的路有也已经挂载上去 解决方法： 查看官网，官网在addRoute 方法下有一条提示： 请注意，添加路由并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。 这句.
vue-router 嵌套子路由无效，不显示页面问题
潜心
10-08 5444
在中大型vue项目中，嵌套路由是避不开的话题。
Vue 嵌套路由使用总结（推荐）
10-15
主要介绍了Vue 嵌套路由使用总结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
08-31
主要介绍了vue2.0嵌套路由实现豆瓣电影分页功能(附demo),这里整理了详细的代码,有需要的小伙伴可以参考下。
vue多层嵌套路由实例分析
10-17
主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
08-28
主要介绍了vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 同一个页面路由无反应_vue-router 嵌套路由没反应
weixin_39737240的博客
12-20 369
先看下route.js//route.jsconst App = () => import('../App.vue');const Login = () => import('../component/Login.vue');const Class = () => import('../component/Class.vue');const CourseList = () =&g...
Broken Necklace
热门推荐
jimzhai的专栏
02-05 17万+
Broken Necklace You have a necklace of N red, white, or blue beads (3 1 2 1 2 r b b r b r r b r
vue3 动态添加路由不生效解决
weixin_50586667的博客
06-22 4305
vue3 动态添加路由不生效解决 描述 router.addRoute({path:“/addrouter”,name:‘addrouter’,component:() => import(“./views/addrouter.vue”)}) 输入路由地址访问不了，提示没有匹配到这个路由 解决方案 不能直接在浏览器输入url地址去访问，可以通过调用方法router.push 能成功跳转 ......
Vue3中使用路由常见问题的解决方案
m0_61998604的博客
05-09 2038
Vue3是目前前端界最流行的开发框架之一，其中Vue Router是Vue3中非常重要的一部分。尽管Vue Router相对简单易用，但是在使用过程中还是会遇到一些问题，例如： 如何在Vue3中使用路由？ 如何在Vue3中动态传递路由参数？ 如何在Vue3中实现页面的切换效果？ 在本文中，我们将为您提供一些解决这些问题的解决方案。
2021 ICPC 沈阳站 D题 Journey to Un‘Goro （打表+找规律）
dyy7777777的博客
07-25 6592
2021 ICPC 沈阳站 D.Journey to Un'Goro 【链接】[http://codeforces.com/gym/103202/problem/D](http://codeforces.com/gym/103202/problem/D)【题意】【输入】【输出】【思路】【代码】 【链接】http://codeforces.com/gym/103202/problem/D 【题意】 Recently, you’ve taken a trip to Un’Goro. A small road i
vue之嵌套路由...children写错导致不报错且不显示嵌套路由内容
俗人世界
08-03 935
vue之嵌套路由...children写错导致不报错且不显示嵌套路由内容
vue-router 打包文件，路由懒加载、路由嵌套
weixin_44756893的博客
07-06 775
1.vue-router 打包文件 运行 npm run build打包文件，可生成dist文件夹 其中 app文件 是当前应用程序开发的所有代码，都在这个文件里面，（业务代码，自己手动写的代码） vendor（提供商，第三方）在项目中引用第三方的内容，如vue manifest：是为我们打包的代码（相互依赖）做低层支撑 2.vue-router 路由懒加载 当打包构建应用时，js包会变得非常大，影响页面加载。 可以将不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应的组件。就是将不同的路
vue多层嵌套子路由不显示
weixin_44032244的博客
09-20 970
组件Weekends的路由为“/schedule/weekends”，要在父组件中渲染需要配置router-link（访问链接，相当于html中的。
记录vue-router使用嵌套路由，子路由页面不显示问题
danny_799745061的博客
09-09 3050
记录vue-router使用嵌套路由，子路由页面不显示问题
vue2嵌套路由嵌套路由嵌套路由展示
09-08
Vue 2 的嵌套路由可以帮助我们构建复杂的页面结构。在嵌套路由中，一个路由可以包含多个子路由，而每个子路由又可以再次包含自己的子路由。 下面是一个示例，展示了如何在 Vue 2 中使用嵌套路由： 首先，我们需要设置主路由（父路由），这可以在 `router/index.js` 文件中完成： ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Home, children: [ { path: 'about', component: About, children: [ { path: 'contact', component: Contact }, // 其他子路由... ] }, // 其他子路由... ] } ] }) ``` 在上面的示例中，我们定义了一个主路由 `/`，它的组件是 `Home`。然后，我们定义了一个子路由 `/about`，它的组件是 `About`。在 `About` 组件中，又定义了一个子路由 `/contact`，它的组件是 `Contact`。 现在，我们可以在 `Home` 组件的模板中添加一个 `<router-view>` 标签来展示嵌套路由的内容： ```html <template> <div> <h1>Home</h1> <router-view></router-view> </div> </template> ``` 同样地，在 `About` 组件的模板中也要添加一个 `<router-view>` 标签： ```html <template> <div> <h2>About</h2> <router-view></router-view> </div> </template> ``` 这样，当我们访问 `/about` 路径时，`Home` 组件会显示出来，并且在其中展示 `About` 组件。 当访问 `/about/contact` 路径时，`Home` 和 `About` 组件都会显示出来，并且在 `About` 组件中展示 `Contact` 组件。 希望这个示例对你有所帮助！如果你还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值