vue的路由嵌套

最新推荐文章于 2025-07-28 15:59:21 发布
最新推荐文章于 2025-07-28 15:59:21 发布
阅读量220 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue框架 文章标签： vue路由嵌套
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39378691/article/details/83753793
本文详细介绍了如何在Vue项目中利用Router的children属性配置子路由，实现登录后跳转至action组件并展示导航栏和默认内容。通过具体代码示例，展示了如何设置path和component属性以实现嵌套路由。
1.需要在 Router 的参数中使用 children 配置：

PS：登录成功后跳转到action组件，action组件嵌套了多个子组件，渲染左边的导航栏（fixed）和默认渲染index的内容。相当于只有登录和action两个页面
{
path: ‘/action’, component: action, name: ‘action’,
children: [
{ path: ‘/’, component: index, name: ‘index’ },
{ path: ‘index’, component: index, name: ‘index’}
]
}
在这里插入图片描述

2.登录成功后的效果图如下

在这里插入图片描述

3.路由跳转都是在action/后面

在这里插入图片描述

Vue路由器：嵌套路由
百锦再的博客
01-01 1万+
嵌套路由指的是在 Vue Router 配置中，父路由包含子路由，从而在父组件中动态渲染子组件的路由模式。简单来说，就是通过 Vue Router 配置多个层级的路由，每个路由不仅仅指向一个页面组件，而是能够包含其他的子路由，通过子路由来决定渲染哪个具体的组件。父组件可以在指定的插槽位置渲染子组件，从而实现嵌套效果。Vue Router 提供了强大且灵活的路由配置功能，能够满足各种复杂的需求。通过合理使用嵌套路由嵌套命名路由和忽略父组件的特性，开发者可以轻松应对多级路由、动态内容渲染和路由跳转等场景。
Vue嵌套路由
热爱前端的大宝同学。
06-13 468
主要总结了Vue Router嵌套路由的基本概念、配置方法、使用场景、注意事项和实际示例等内容。
vue嵌套路由
qq_44231797的博客
10-26 3516
文章目录一、为什么要使用嵌套路由？二、步骤演示：1.在views目录下新建user目录，编写User.vue和Profile.vue2.配置路由信息 router/index.js3.编写Main.vue4.编写main.js，导入路由信息三、碰到的问题四、解决方案方案一方案二 一、为什么要使用嵌套路由？ 就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个 <
vue中路由
2201_76029313的博客
07-28 1518
2、$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）推荐使用路由独享守卫，最常见的应用就在登录比如商城界面，我要判断你是否登录，如果登陆了就放行，没登陆就跳转到登录界面。3、$route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。适合需要动态逻辑控制的场景，如权限校验、表单提交后跳转。在 Vue Router 的路由配置中，通过。标签，作为子组件的渲染出口。
vue 嵌套路由
MCCLS的博客
07-30 227
要点： 嵌套路由即多级路由 先写路由规则 我们前面写的是一级路由就是一个路由中不在配置路由就是一级路由了 所以要配置多级路由就需要再路由里面再写路由 在路由中加入children配置里面也写入path和component配置项,注意这边子路由里面就不要在path里面加/了因为vue-router已经帮你自动加上了/！！！！ 然后就是在router-link标签上,activ-class激活样式的显示,和to配置,这边注意如果这么写的话一定要把路径写全,不...
Vue路由嵌套详解
qq_41359998的博客
08-19 3312
Vue路由嵌套详解 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。 demo 1.创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件； <template> <h1>个人信息</h1> </template> <script> export default { name: "UserProfile" } </script> <style scoped&gt
vue路由嵌套的SPA实现步骤
08-28
以上就是实现Vue路由嵌套的SPA的详细步骤。通过这种方式，我们可以构建层次分明且易于管理的应用，同时提供流畅的用户体验。在实际开发中，还可以结合元信息（meta）、命名视图（named views）和其他高级特性，...
vue 路由嵌套高亮问题的解决方法
08-27
在这个场景中，我们遇到了一个特定的问题：路由嵌套高亮问题，即在主路由和子路由切换时，对应的导航菜单未能正确地高亮显示，或者在某些情况下导致页面数据空白。以下是如何解决这个问题的详细步骤和解释： 1. **...
Vue实现路由跳转和嵌套
08-30
Vue 实现路由跳转和嵌套 在 Vue 中实现路由跳转和嵌套是非常重要的，今天我们将介绍如何使用 Vue 实现路由跳转和嵌套。首先，我们需要安装 Vue Router，使用以下命令安装：`cnpm i vue-router -D` ### 配置路由 ...
Vue 嵌套路由
ChaoChao66666的博客
03-18 342
在上一篇（Vue3 Router（路由）的基本使用_Zhichao_97的博客-优快云博客）的基础上，希望实现嵌套路由，如下： 1.将vue3Router01>src>index.js改为如下所示： import {createRouter,createWebHashHistory} from 'vue-router' import News from '../components/News.vue' import User from "../components/...
Vue路由嵌套
shizhenweiszw的博客
03-01 672
使用children属性实现路由嵌套 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="./lib/vue-2.4.0.j
vue嵌套子路由
小菜鸟的博客
12-06 420
vue嵌套子路由 今天自己的项目需要使用嵌套子路由，里面出现了几个bug下面记录一下 首先简单讲解下嵌套子路由的使用 我们在需要使用子路由的页面使用router-view,keep-alive的使用方式好像有所改变，自己去查看官网 路由页面index.js 组件跳转子路由 vue.config.js 下面简单说下我遇到的bug 1.你要修改历史路由路径，重新创建个文件vue.config.js，不然你在地址栏输入路径的时候会报错 2.就是你在使用router-link的时候一定要注意 这里一定要注
Vue的嵌套路由
2301_80071107的博客
04-08 255
这个示例展示了典型的主从结构（Master-Detail）模式，非常适合内容展示类网站。通过嵌套路由，我们可以保持页面布局的连贯性，同时实现内容的动态加载。
Vue中的路由嵌套
m0_59345890的博客
09-11 2796
我们还可以做一个优化，在home路由对应的组件加载到页面时，我们需要默认加载一个子路由时，我们需要做一个重定向，在home路由中redirect:"重定向的子路由网址"。路由嵌套，即在当前路由中注册子路由中，形成父子结构，显示子路由对应的组件，需要网址在父路由的pathname下才能实现，后面再具体演示。子路由内也可以注册它的子路由，一直下去就可以形成一个庞大的“家族”。这个时候子路由已经注册好了，子路由的path路径都是在父路由的基础下创建，我们再在对应引入组件的位置创建好组件。
【VUE 嵌套路由】
居然天上楼的博客
12-05 1428
路由配置 / 路由对象：即配置了path和component的对象 当你需要将某个视图显示在App.vue的位置，则将你的路由配置写在router/index.js的routes常量下，作为routes的数组元素即可；当你需要将某个视图显示在其它视图的位置，例如显示在HomeView.vue的位置，则在其它视图的路由配置中添加children属性，并将你的视图的路由配置在此children下即可
Vue——嵌套路由
虽菜但瘾
02-02 310
路由 有关路由的详细信息可以去vue的官网去查看，我这里只是自己实例的一个理解和总结。 单页面程序离不开路由的分配，自始至终只有一个页面存活，因此有关路由跳转的逻辑要合理配置 vue-Router 选择官方使用的vue-router库，因此要先准备环境 安装 $ npm install vue-router 安装之后就要配置路由，但是为了方便维护路由节点，可以创建单独的文件存放路由配置，因此创建router文件夹，添加index.js index.js import Vue from 'vu
Vue路由的嵌套
zsyoung的博客
05-12 186
1. 配置路由 在main.js中或自己指定的路由文件中： { path:'/user', component:User, children:[ {path: 'useradd', component: UserAdd}, {path: 'userlist', component: Userlist} ] } 上面的childre...
vue 路由嵌套
最新发布
09-03
Vue路由嵌套适用于页面一部分变化、一部分不变的场景。使用时需注意两个要点：子路由的`path`设置以及主组件结构中必须添加`<router-view></router-view>`标签 [^1]。 以下是使用Vue - cli搭建项目并进行路由嵌套的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值