父子路由嵌套（用来在同一页面进行内容区域的跳转）

最新推荐文章于 2024-06-20 15:58:49 发布
最新推荐文章于 2024-06-20 15:58:49 发布
阅读量7.4k 收藏 9
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40816649/article/details/80664358
版权

除了主页之外的其它页面也可以拥有子路由

这个相比之前写的路由方法可能配置起来会麻烦点

首先先在component文件加下新建一个.vue文件，这个文件是父路由，然后再这个目录下载建一个同名的文件夹（方便找）

在这个同名的文件夹下建立.vue文件的子路由组件

在main.js中配置路由

.vue文件中用router-link这个标签到对应的路由组件大工告成


养只猫
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Vue路由同一页面显示
weixin_57661986的博客
03-30 1251
Vue路由子路由功能实现
父子路由（路由的嵌套）
Zyl_CN的博客
10-17 1009
routes:[ { path:'/home', component:home, children:[ {path:'login',component: login}, {path:'reg',component:reg} ]}, ],
（四十三）Vue Router之嵌套路由
最新发布
忆亦何为的博客
06-20 519
实际生活中的应用界面，有可能由多层嵌套的组件组合而成。在Vue.js中，Vue Router提供了嵌套路由的功能，允许您在应用程序中创建层次化的路由结构。通过嵌套路由，可以在父路由下定义子路由，从而实现更复杂的页面组织和导航。
路由跳转，页面跳转
qq_43498712的博客
06-09 101
this.$router.push({ push: "/finance", //这里写路径 })
vue-router基础（二）动态路由匹配
hrbsfdxzhq01的博客
02-15 755
我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果  const User = { template: '<div>User</div>' } const router = new VueRouter({ ...
vue 同一个页面路由无反应_vue-router 嵌套路由没反应
weixin_39737240的博客
12-20 375
先看下route.js//route.jsconst App = () => import('../App.vue');const Login = () => import('../component/Login.vue');const Class = () => import('../component/Class.vue');const CourseList = () =&g...
Angular路由的嵌套 父子路由（3）
03-07
在Angular中，路由可以被组织成一种层次结构，这称为嵌套路由，而这种嵌套关系则形成了父子路由的概念。 首先，我们需要理解什么是Angular的路由。路由是一种机制，它根据URL来决定展示哪个组件。在Angular应用中，...
CRM管理后台VUE页面模板
05-01
通过路由守卫，还可以在用户访问特定页面前进行权限验证，确保数据的安全性。 模板中可能还包括Axios库，用于发起HTTP请求，与后端服务器进行数据交互。Axios支持Promise API，易于链式调用，且具有丰富的拦截器...
vuevuerouter做webapp页面的切换
08-10
嵌套路由是Vue Router的另一强大特性，允许在一个组件内嵌套其他组件，形成父子关系的路由结构。 以上就是使用Vue和Vue Router实现WebApp页面切换的基本步骤和关键知识点。在实际开发中，根据项目的复杂度，你可能...
vuedemo-study
05-17
路由跳转,路由嵌套, axios异步获取数据  element组件  swiper组件  生命周期,  vuex  等等,对vue的使用有了大概的了解和认识 vue 生命周期:组件实例化从创建到结束的整个过程 可以通过生命周期解决需求,解决...
2018年Vue2.x 5小时入门视频教程-包括Vuex、MintUi、ElementUi基础教程-02.zip
10-05
在"17 Vue中的路由 以及默认路由跳转.zip"中，你将学习如何定义和配置路由，以及如何通过`router-link`和`router-view`实现页面间的导航。此外，"18 Vue动态路由 Get传值.zip"会讲解如何处理动态路由参数，以获取和...
vue 中 router-view 路由跳转到同一个页面，页面刷新解决记录
ITLISHUANG的博客
07-28 3808
写在前：当前环境，在父级页面点击方法跳转路由，路由携带参数到同一个页面，本例使用name/params(post）方式传参，页面不刷新解决方式记录。 1.修改传参方式为get,当路由地址发生改变的时候，重新刷新页面。（绑定以下key） <router-view :key="$route.fullPath"></router-view> 当前传参环境： router.js页面案例： { path: 'rotation', component: Rotatio.
同一路由刷新
weixin_42360556的博客
10-30 429
改变id来达到刷新路由的目的 使用场景：我是需要做一个点击列表菜单的时候刷新一个组件的数据，但是router他是不会因为改变了一个传过去的数据而重新刷新的，只有改变路径才会刷新，所以使用了一个简答粗暴的方法 &lt;router-view :key="activeDate"&gt;&lt;/router-view&gt; 在这里加了一个key ，key的值发生变化时候router会重新加载 然后在...
同名路由切换如何解决，父子路由交互如何实现的问题（偏向PC）
weixin_41033048的博客
11-09 195
看完这篇包你会Vue路由嵌套页面（最详细）
江柯一梦
01-20 1952
首先在App.vue文件下加入如下 再到router---->index.js编写路由的js 在这里我的主体是统一在Main.vue页面渲染所有嵌套子页面写在了Main下面，这里需要注意的是（children）这个是重点 我们需要在Main.vue（主页）中进行子页面的注册，把子页面都引入主页面直接看结构吧 圈起来的地方（router-view）是你需要在哪里渲染，什么位置，这个可以自...
vue怎么嵌套多级路由页面打不开_【Vue】嵌套路由
weixin_32190377的博客
01-12 774
嵌套路由之前用路由做了一个导航页面，这波在路由里面嵌套路由，在社区页面中再添加三个路由学术讨论、资源下载以及个人中心。嵌套的子路由同样需要通过 router.js 文件进行配置，配置方法为在父路由中设置 childrenchildren 数组中包含几个对象，则表示有几个子路由子路由的路径可以使用简写，即路径中不写 / ，在跳转路径时会向上查找，找到父路由路径并拼接。例如子路由路径为 path: '...
Vue Router 嵌套路由页面跳转
littlebearGreat——宁静致远
12-06 1512
嵌套路由写法与编程式导航跳转。 需要注意文档上的一句话： “要注意，以/开头的嵌套路径会被当作根路径” 1. 路由写法 routes = [{ path: '/', redirect: '/index' }, { path: '/index', component: () => import('../views/index.vue') }, { user: '/user', redirect: '/user/home', compo..
vue中使用iframe标签嵌入页面
weixin_62733705的博客
11-01 997
vue中使用iframe标签嵌入页面，并给iframe的url添加header
两个同级路由如何相互访问
jiong0818的博客
11-23 7019
飞鱼星路由器设置：WAN(192.168.1.2) LAN(192.168.0.1) 1、添加静态路由 2、开启远程管理（想要从另个网段管理路由器） 3、防火墙添加一条任意访问的规则 TP-LINK路由器：WAN(192.168.1.100) LAN(192.168.3.1) 1、添加静态路由 2、开启远程访问 3、TP路由器应该也要设置防火墙的访问规则，可惜找不到，现在目前的状态是TP下的终端能访问飞鱼星下面的终端，但是飞鱼星下面的终端访问不了TP下面的终端。 ...
vue3父子组件路由跳转
09-02
在Vue 3中，父子组件之间的路由跳转可以通过使用Vue Router来实现。以下是一种常见的实现方式： 1. 首先，确保你已经安装了Vue Router，并且在Vue应用中进行了配置。 2. 在父组件中，使用 `<router-link>` 组件来创建一个链接，指向子组件所对应的路由路径。例如： ```html <router-link to="/child">Go to Child Component</router-link> ``` 3. 在Vue Router的配置文件中，定义子组件的路由路径和对应的组件。例如： ```javascript import ChildComponent from '@/components/ChildComponent.vue' const routes = [ { path: '/child', component: ChildComponent } ] const router = createRouter({ history: createWebHistory(), routes }) ``` 这里假设子组件的名称为 `ChildComponent`，它在 `/components` 文件夹下。 4. 确保在父组件中使用了 `<router-view>` 组件来渲染子组件的内容。例如： ```html <router-view></router-view> ``` 这样，当你点击父组件中的链接时，Vue Router会根据配置的路由路径加载对应的子组件，并将其渲染在 `<router-view>` 组件中。 这就是使用Vue Router实现父子组件之间路由跳转的基本步骤。你可以根据项目需求进行进一步的配置和调整。希望对你有所帮助！如有更多问题，请继续提问。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值