看完这篇包你会Vue路由嵌套页面（最详细）

最新推荐文章于 2024-04-15 13:47:16 发布
最新推荐文章于 2024-04-15 13:47:16 发布
阅读量1.9k 收藏 6
点赞数 3
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_666123/article/details/104048582
版权

首先在App.vue文件下加入如下
在这里插入图片描述
再到router---->index.js编写路由的js
在这里我的主体是统一在Main.vue页面渲染所有嵌套子页面写在了Main下面，这里需要注意的是（children）这个是重点
在这里插入图片描述
我们需要在Main.vue（主页）中进行子页面的注册，把子页面都引入主页面直接看结构吧
在这里插入图片描述
圈起来的地方（router-view）是你需要在哪里渲染，什么位置，这个可以自行调整
到这里就完成了页面嵌套，最后给大家看一下完成效果是什么样的
在这里插入图片描述
在这里插入图片描述

调皮的龙猫
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue页面嵌套外部url
Queen-Shir的博客
12-17 4842
我的需求是一进入页面通过调接口获取页面的url，然后把url嵌套到当前页面。 <template> <div class="page-content" id="bi-div"></div> </template> <script> import reportFormApi from '@/api/reportForm' export default { name: 'reportComponent', props
Vue中嵌套路由（子路由）的使用
最新发布
bigcarp的专栏
04-26 671
请注意不要把普通路由设为子路由，否则路由不会跳转的。当你想要在一个路由的组件内部展示另一个组件，并且这个内部组件的 URL 是基于外部组件的 URL 时，才需要使用children。
Vue.router中的嵌套路由,和跳转的四种方式
最爱喝怡宝的博客
12-16 5691
嵌套路由（又叫 嵌套子路由）嵌套路由--- 通常由多层嵌套的组件组合而成。 1:router-view的细分 router-view第一层中，包含一个router-view 2:每一个坑挖好了，要对应单独的组件 路由配置 routes: [ { path:'/menu', name:'menu', component:menu, //路由嵌套增加
前端开发：Vue中嵌套标签iframe的使用
2401_84093860的博客
04-15 1567
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
vue中使用iframe标签嵌入页面
weixin_62733705的博客
11-01 993
vue中使用iframe标签嵌入页面，并给iframe的url添加header
vue项目通过url链接引入其他系统页面
热门推荐
ZHANGLIZENG的博客
12-23 1万+
1.正常配置菜单，在vue页面使用iframe进行嵌套加载其它系统的页面，已加载百度为例 <template> <div id="app"> <iframe style="border:none" :width="searchTableWidth" :height="searchTableHeight" v-bind:src="reportUrl" ></ifr
Vue路由分模块 与 子路由嵌套,
技术前端，忠于热爱 @0.活在风浪里
01-07 1478
路由模块化 创建文件路径如下： 路由模块化思路 /** * * 还是导入导出那一套,首先新建语义化的文件,在js文件中导出export default { // XXX } * 导出多个路由模块要加[]，例如export default [{},{}], * 在router.js引入，写在路由里，需要...引入的名字 * */ 1、新建文件后 内容如下方 新建的sort.js文件 /** * 多个分模块路由。 */ export default [{ // 如果多.
父子路由嵌套（用来在同一页面进行内容区域的跳转）
qq_40816649的博客
06-12 7486
除了主页之外的其它页面也可以拥有子路由这个相比之前写的路由方法可能配置起来会麻烦点首先先在component文件加下新建一个.vue文件，这个文件是父路由，然后再这个目录下载建一个同名的文件夹（方便找）在这个同名的文件夹下建立.vue文件的子路由组件在main.js中配置路由.vue文件中用router-link这个标签到对应的路由组件大工告成...
详解vue路由篇(动态路由、路由嵌套)
12-08
在 Vue 中，`vue-router` 是官方提供的路由管理器，它使得单页面应用（SPA）能够根据 URL 地址切换不同的视图。路由的主要职责是根据 URL 映射到相应的组件，从而实现页面间的导航。 一、基础路由 创建 Vue 项目时...
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
10-18
今天小编就为大家分享一篇vue 刷新之后 嵌套路由不变 重新渲染页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue三层嵌套路由的示例代码
08-27
本篇文章主要介绍了 Vue 三层嵌套路由的示例代码，通过这个示例代码，我们可以学习如何在 Vue 中实现三层嵌套路由。下面，我们将逐步讲解这个示例代码的各个部分。 首先，我们需要了解什么是嵌套路由。在 Vue 中，...
Vue下路由History模式打包后页面空白的解决方法
08-27
History 模式可以解决这些问题，但是新手往往会碰到 History 模式打包后页面空白的情况，这个问题是因为 Vue 官方没有正确地配置路由的 base 参数所导致的。 解决方法是，在 vue-router 的配置中添加 base 参数，...
Vue + Element UI 前端篇（十五）：嵌套外部网页
y19910825的博客
09-05 2901
并且在每次路由时，把路由路径保存到store，如果是IFrame嵌套页面，则IFrame会在渲染时到store读取iframeUrl以确定渲染的内容。2. 路由导航守卫在动态加载路由时，检测到如果是外部嵌套网页，则绑定IFrame嵌套组件，最后用IFrame来渲染嵌套页面。接下来我们就讲解具体实现方案。3. 菜单点击跳转的时候，根据路由类型生成不同的路由路径，载入特定的页面内容渲染到步骤二绑定的特定组件上。在导航守卫动态加载路由的时候，解析URL，如果是嵌套页面，则绑定到IFrame组件。
vue iframe 内嵌网页
唐僧的专栏
06-28 9544
项目有个需求，打开一个资讯 并且可以把当前 资讯页面通过微信或者QQ 分享 给别人。能分享给别人 这个页面必然是一个 独立的 html url 页面。 别人才能通过分享打开 所以呢 这个我们需要把这个页面 潜入到 vue。 既能在VUE里面打开， 也能通过 url 分享给别人使用 <div class="content" style="position: ab...
VueRouter实现路由嵌套单页面展示
明知山
08-24 1362
放两张效果图 在这里点击政治现实政治的页面，历史同理，而且域名路径发生了变化，但是却在同一个页面 首先先建两个文件，child.vue和son.vue 再配置路由 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history',...
vue页面嵌套百度地图
m0_51458935的博客
10-21 487
vue嵌套百度地图和检索
在vue项目中引入第三方样式并能够保留状态
xiaofangmin的博客
08-13 1101
文章目录问题描述思考实现后的效果实现思路核心代码另一种解决方案核心的思路遇到的小问题参考博客地址 问题描述 在一个项目中遇到这样一个问题：在vue项目中，通过组件跳转，可以进入第三方的页面，并且路由跳转离开该网页再回来时仍然要保留第三方的页面的状态。 思考 若是在vue项目中的自己组件之间进行路由跳转，可以通过keep-alive 属性来达到缓存的效果，但是，这个是第三方的网页，我们需要使用iframe标签的src属性来引进第三方的网页，当我们对第三方的网页进行搜索之后，将会在基本的src上加上一系列的参数
在vue中嵌入外部网站的实现
11-13 2019
利用iframe top:导航栏的height left:左侧菜单栏的width src:右侧页面要嵌入的外部网站 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <template> <div> <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" framebo..
VUE包含多个router-view解决办法
爱coding的大尾巴的专栏
07-05 9660
如果一个页面有多个router-view，加载时会重复加载接口。解决这个问题，可使用以下方式：1，将router-view加入name属性。 2，路由规则里面加入 components，使router-view加入name属性与页面对应。 3，将JS点击事件对应到路由规则的name属性 这样，每次tab切换加载页面时，只加载对应页面的接口。......
vue路由可以嵌套html吗,vue 路由嵌套.html
05-23
Vue 路由（Vue Router）可以嵌套 HTML，但需要注意以下几点： 1. 路由嵌套的 HTML 必须在组件中定义； 2. 在 Vue Router 中，路由嵌套分为两种类型：嵌套路由和命名视图； 3. 嵌套路由是指一级路由下面还有二级、三级路由等等，通过 `children` 配置实现； 4. 命名视图是指多个组件同时渲染到同一个路由出口（`<router-view>`），通过 `components` 配置实现。 以下是一个使用嵌套路由的示例代码： ```javascript const router = new VueRouter({ routes: [ { path: '/home', component: Home, children: [ { path: 'news', component: News }, { path: 'about', component: About } ] } ] }) ``` 在这个例子中，`Home` 组件中包含了两个子路由：`news` 和 `about`。当用户访问 `/home/news` 或 `/home/about` 时，对应的组件会显示在 `Home` 组件中。 当然，在实际开发中，还可以根据需要使用命名视图来实现路由嵌套。不过需要注意的是，命名视图只能在同级路由之间共享，不能跨级共享。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值