vue 嵌套路由

最新推荐文章于 2025-11-09 18:01:48 发布
原创 最新推荐文章于 2025-11-09 18:01:48 发布 · 240 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细介绍了Vue.js中如何配置和使用嵌套路由。通过在路由对象的children属性中定义子路由，可以实现多级路由导航。在`router-link`组件的`to`属性中需完整指定路径，确保子路由能正确被激活。同时，文章强调了子路由`path`不应以`/`开头，因为Vue Router会自动添加。

 要点：

 

嵌套路由即多级路由

先写路由规则

我们前面写的是一级路由就是一个路由中不在配置路由就是一级路由了

 所以要配置多级路由就需要再路由里面再写路由

在路由中加入 children配置里面也写入path和component配置项,注意这边子路由里面就不要在path里面加/了因为vue-router已经帮你自动加上了/！！！！

 

然后就是在router-link标签上,activ-class激活样式的显示,和to配置,这边注意如果这么写的话一定要把路径写全,不会就找不到子路由，就会什么都不显示

 

 

 

详解vue嵌套路由-query传递参数
08-30
"详解vue嵌套路由-query传递参数" 在前端开发中，路由机制是不可或缺的一部分，而在 Vue 中，我们可以使用 Vue Router 来实现客户端路由。今天，我们将详细介绍如何在 Vue 嵌套路由中传递参数，特别是使用 query 来...
vue嵌套路由与404重定向实现方法分析
12-03
首先，让我们理解什么是Vue的嵌套路由。嵌套路由是指在已有的路由组件内部再定义新的路由，也就是在已有的路由页面下可以继续使用路由。例如，如果你有一个用户页面（/user/:id），在该页面中，你可以根据用户的操作...
vue嵌套路由
qq_44231797的博客
10-26 3559
文章目录一、为什么要使用嵌套路由？二、步骤演示：1.在views目录下新建user目录，编写User.vue和Profile.vue2.配置路由信息 router/index.js3.编写Main.vue4.编写main.js，导入路由信息三、碰到的问题四、解决方案方案一方案二 一、为什么要使用嵌套路由？ 就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个 <
Vue嵌套（多级）路由
最新发布
qq_51626500的博客
11-09 654
Vue嵌套（多级）路由
Vue嵌套路由
前端小巷子的博客
08-13 366
在单页应用里，“页面”不再是整屏刷新，而是由路由驱动的组件树。当业务复杂到「用户中心 → 个人资料 / 收货地址 / 账号安全 / 好友列表」这种层级时，嵌套路由（Nested Routes）是唯一能把深度与可维护性同时保留下来的方案。
详解vue嵌套路由-query传递参数.zip
03-09
"详解vue嵌套路由-query传递参数.zip"这个压缩包显然包含了一个关于如何在Vue Router中使用`query`参数来传递数据的教程。 Vue Router中的`query`参数是URL查询字符串的一部分，通常用于非持久性的、可选的数据传递...
解决vue-router 嵌套路由没反应的问题
10-14
原因在于，Vue Router中的嵌套路由需要父路由有一个对应的组件，该组件中包含一个`<router-view>`标签，用于渲染子路由对应的组件。在原始的配置中，`/course`路由没有指定组件，因此Vue Router无法找到放置子路由...
Vue 嵌套路由
ChaoChao66666的博客
03-18 357
在上一篇（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的路由嵌套
坤音女孩的博客
11-05 245
1.需要在 Router 的参数中使用 children 配置： PS：登录成功后跳转到action组件，action组件包括多个子组件，渲染左边的导航栏（fixed）和默认渲染index的内容。相当于只有登录和action两个页面 2.登录成功后的效果图如下 3.路由跳转都是在action/后面 ...
Vue路由嵌套
shizhenweiszw的博客
03-01 680
使用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 437
vue嵌套子路由 今天自己的项目需要使用嵌套子路由，里面出现了几个bug下面记录一下 首先简单讲解下嵌套子路由的使用 我们在需要使用子路由的页面使用router-view,keep-alive的使用方式好像有所改变，自己去查看官网 路由页面index.js 组件跳转子路由 vue.config.js 下面简单说下我遇到的bug 1.你要修改历史路由路径，重新创建个文件vue.config.js，不然你在地址栏输入路径的时候会报错 2.就是你在使用router-link的时候一定要注意 这里一定要注
Vue的嵌套路由
2301_80071107的博客
04-08 300
这个示例展示了典型的主从结构（Master-Detail）模式，非常适合内容展示类网站。通过嵌套路由，我们可以保持页面布局的连贯性，同时实现内容的动态加载。
Vue中的路由嵌套
m0_59345890的博客
09-11 2827
我们还可以做一个优化，在home路由对应的组件加载到页面时，我们需要默认加载一个子路由时，我们需要做一个重定向，在home路由中redirect:"重定向的子路由网址"。路由嵌套，即在当前路由中注册子路由中，形成父子结构，显示子路由对应的组件，需要网址在父路由的pathname下才能实现，后面再具体演示。子路由内也可以注册它的子路由，一直下去就可以形成一个庞大的“家族”。这个时候子路由已经注册好了，子路由的path路径都是在父路由的基础下创建，我们再在对应引入组件的位置创建好组件。
【VUE 嵌套路由】
居然天上楼的博客
12-05 1445
路由配置 / 路由对象：即配置了path和component的对象 当你需要将某个视图显示在App.vue的位置，则将你的路由配置写在router/index.js的routes常量下，作为routes的数组元素即可；当你需要将某个视图显示在其它视图的位置，例如显示在HomeView.vue的位置，则在其它视图的路由配置中添加children属性，并将你的视图的路由配置在此children下即可
Vue——嵌套路由
虽菜但瘾
02-02 325
路由 有关路由的详细信息可以去vue的官网去查看，我这里只是自己实例的一个理解和总结。 单页面程序离不开路由的分配，自始至终只有一个页面存活，因此有关路由跳转的逻辑要合理配置 vue-Router 选择官方使用的vue-router库，因此要先准备环境 安装 $ npm install vue-router 安装之后就要配置路由，但是为了方便维护路由节点，可以创建单独的文件存放路由配置，因此创建router文件夹，添加index.js index.js import Vue from 'vu
Vue路由的嵌套
zsyoung的博客
05-12 198
1. 配置路由 在main.js中或自己指定的路由文件中： { path:'/user', component:User, children:[ {path: 'useradd', component: UserAdd}, {path: 'userlist', component: Userlist} ] } 上面的childre...
vue 嵌套路由
09-11
Vue嵌套路由是指通过路由实现组件的嵌套展示，主要由页面结构决定。实际项目的应用界面常由多层嵌套的组件组合而成，为使这些组件能通过路由访问，路由需具有嵌套关系，即路由里嵌套子路由[^2]。 使用方法步骤如下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值