vue-router如何定义嵌套路由？

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

#vue.js #javascript #html

本文详细介绍了如何在Vue项目中实现路由嵌套，通过在VueRouter参数中使用`children`配置，创建title1.vue和title2.vue作为子路由组件，并在router/index.js中引入和配置路径。在test.vue中引用子路由，确保在to属性中指定完整路径，包括父路由。总结指出，任何子路由都在其父路由组件内切换显示，且父路由需包含组件引用及`router-view`组件。遵循这些步骤，可以成功实现多层路由嵌套。

大家都知道选项卡，在选项卡中，顶部有数个导航栏，中间的主体显示的是内容；这个时候，整个页面
是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，这个时候就是路由中嵌套路由。

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在
VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。

① 为了演示，我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容
在这里插入图片描述
在这里插入图片描述
② 现在我们在router 》 index.js 中将这上面两个新建的组件引入进来并填写路径，这里的Title1和
Title2是作为test.vue页面的子路由，所以要写在children属性下
在这里插入图片描述
③ 然后我们再去到test.vue中敲：
在这里提个醒，在to后面写路由路径的时候，一定到带上绝对路径，也就是要把test这个父路由路径写
进去"/test/title1"

在这里插入图片描述
④ 最后我们进入浏览器点击不同的标题就可以看到不同内容的展示

路由嵌套总结
任何子路由都是在其父路由的组件中切换显示，不管是多少层的路由嵌套，都是这样的理解，所以父路
由需要有以下两点，二者缺一不可

有组件引用 
组件中有router-view组件

父路由没有引用组件，导致子路由没有承载容器，自然而然就出现了两层路由跳不起来等不起效的情况

【工作常用】VUE页内路由
weixin_41687289的博客
11-14 687
我们经常会有种需求是，左侧边栏是不变的，在右边实现组件更新。 咋做的呢？？难不成写很多冗余的页面，都包含同样的侧边栏，然后跳转过去之后再考虑状态问题？ 这也太蠢了。而且跳转过去之后考虑状态问题太蛋疼了。那么我们要怎么办？？？ 可以用嵌套路由。 首先贴大神博客。 既然都说了是嵌套路由，那么我们大概有了想法了： ① 为了演示，我们现在view文件夹下新建一个title1.vue和title2.vue用...
Vue Router 嵌套路由
qq_40930841的博客
04-29 3002
父路由路径/子路由路径// router.js文件内容如下：// 导入组件// // 创建路由实例对象// // routes数组用于定义路由匹配规则// ]// })// // 导出路由实例对象//嵌套路由routes: [})// 导出路由实例对象。
一文说清静态路由、浮动路由以及默认路由
最新发布
GSxh999的博客
10-16 893
静态路由是有网络管理员手动配置在路由设备上的路由信息。他制定了数据包到达特定目的地所需经过的路径。与动态路由协议不同，静态路由不会自动学习或更新路由信息，所有路由条目都需要人工维护。浮动路由本质上是一条静态路由，但他的管理距离（Administrative Distance，简称AD值）被设置为比主用路由更高。这样，当主用路由失效时，浮动路由会自动“浮现”出来，成为新的可用路由，实现主备切换和链路冗余。
vue-router 定义路由、嵌套路由
qq_26642611的博客
12-20 727
路由的定义，主要有以下几步： 1、如果是模块化机制，需要调用 Vue.use(VueRouter) 2、定义路由组件，如： const Foo = { template: '<div>foo</div>' }; 3、定义路由（数组）： const routes = [ { path: '/foo', component: Foo ...
vue-router 嵌套路由
m0_72694993的博客
09-09 4333
值得注意的是这里link标签中to属性的绑定，不能直接写我们定义时写的路径，因为子组件的路径会自动拼接父组件前边的路径，所以我们可以通过name进行绑定，或者可以通过写出完整路径进行绑定。在我们进行嵌套的路由里边，使用router-view添加路由，然后通过router-link进行绑定跳转的子路由。2.确定好之后，找到对应路由的文件，在指定的位置写入router-view标签。4.在其中添加children属性，绑定的是数组，数组里边定义新的子路由。最基础的路由嵌套就ok了。
Vue嵌套（多级）路由
m0_61787196的博客
06-11 1552
Vue嵌套（多级）路由
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
解决vue-router 嵌套路由没反应的问题
10-14
总结，解决Vue Router嵌套路由无响应的问题，关键在于确保每个嵌套的父路由都有一个对应的组件，并且这个组件模板中包含`<router-view>`标签。理解路由的嵌套结构和`<router-view>`的作用对于正确地使用Vue Router至...
精选资源
vue-router实现嵌套路由的讲解
01-19
一、嵌套路由（配置好父路由component后，在父路由下面添加children属性来配置这个父路由的子路由） 需要注意的是：父组件中的<router></router>是子组件的占位符是必不可少的 嵌套路由的现象：点击了路由跳转之后父...
在Vue中通过vue-router实现路由嵌套
01-08
随着Vue单页应用(SPA)变得复杂 需要使用路由嵌套 路由嵌套允许更复杂的用户界面以及相互嵌套的组件 如果对Vue的路由不太熟悉 请参看我的另一篇博客：Vue学习之旅Part9：使用vue-router实现前端路由和参数传递 路由嵌套 即路由的组件内部还有子组件 适用于很多业务场景 实现路由嵌套的步骤比较简单 首先 在路由对象里定义子路由： 子路由的path命名需注意：子路由的path路径前面不能加斜杠 子路由的path前面会自动拼上父路由的path // 定义组件模板对象 var account={ template:#tmpl } v
vue定义嵌套路由
热门推荐
吴小迪的博客
08-11 1万+
在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？ 其实很简单，只需要我们在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 下面为示例代码： index.html，只有一个路由出口 <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->...
vue项目中使用vue-router进行路由配置及嵌套多级路由
moandaylab
01-30 3479
在vue项目中用vue-router进行路由配置，以及嵌套二级、三级路由
【Vue学习】vue-router路由嵌套
MangoSwordsman的博客
10-04 552
vue学习 vue-router 路由嵌套
vue-router（基础2-嵌套路由）
weixin_44042442的博客
04-11 1116
嵌套路由 什么是嵌套路由 实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如： /coma/a /coma/b 案例 基础的我们就跳过了，还有对创建项目和组件配置路由不清楚的朋友可以查看前几篇文章，我都有详细步骤。 我们创建组件comA,comAsua,comAsub. <!-- 组件comA的代码 --> <template> <section> <div>我是A组件<
vue-router 基本使用（三）——嵌套路由
yb305
06-12 794
嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分。 　　在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer. Phone, tablet, compute 就相当于进入到了home的子元素。所以vue 提供了childrens 属性，它也是一组路由,相当于我们所写的routes。 　　首先，..
Vue路由嵌套详解
qq_41359998的博客
08-19 3327
Vue路由嵌套详解 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。 demo 1.创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件； <template> <h1>个人信息</h1> </template> <script> export default { name: "UserProfile" } </script> <style scoped&gt
Vue Router 模拟 - 嵌套路由
皮蛋很白的博客
07-28 512
vue-router 模拟嵌套路由 vue-router 源码 src 目录结构 components link.js router-link组件 view.js router-view组件 history 历史管理，包含3个模式 hash.js - hash模式 html5.js - history模式 abstract.js - 服务端渲染时使用的抽象模式 base.js - 上面3个模式的父类，提供一些公共的内容 errors.js - abstract.js使用的方法 util 存放一
深入vue-router路由嵌套理解
10-04
const router = new VueRouter({ routes: [ { path: '/home', component: Home, children: [ { path: 'about', component: About }, { path: 'contact', component: Contact } ] } ] }); ``` 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值