VUE二级/多级路由配置方式（嵌套路由）

最新推荐文章于 2025-10-14 21:07:54 发布

原创最新推荐文章于 2025-10-14 21:07:54 发布 · 7.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #开发语言 #路由算法

本文详细介绍了Vue Router中二级路由的配置方式，包括path字段的使用，以及如何根据path的不同写法调整router-link的to属性。重点强调了在一级路由内设置路由出口<router-view/>的重要性。通过实例解析，帮助开发者理解并正确实现二级路由导航。

二级路由中path写法不同对应router-link标签to属性的不同写法

二级路由配置path:"/XXX"，path中带/ ，则对应的路由导航router-link中的to属性就是"/XXX"

二级路由配置path:"XXX"，path中不带/ ，则对应的路由导航router-link中的to属性就是"/一级路由/二级路由"

注意事项：配置完路由后一定要在一级路由中设置路由出口<router-view/>

ps:后面图片是二级路由配置写法及对应路由出口to属性写法。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cxy_pan0913

关注关注

16
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue二级路由以及多级路由嵌套思路

weixin_53212937的博客

12-22

1786

Vue二级路由嵌套以及多级路由嵌套思路在router文件中的router.js中先将一级路由注册 import Vue from 'vue' import VueRouter from 'vue-router' const routes = [ //这里是一级路由 { path:'/index', name:'index', //路由懒加载 component:()=>import('../component/index.vue') } ] import Vue from 'vue'

Vue2路由：手动配置使用路由&路由嵌套、路由动态传参（:参数，query、props）、编程式导航（back、go）、导航守卫

欢迎来到长风沛雨的博客

03-05

6802

导航守卫可以控制路由的访问权限例如：在首页，点击导航进入后台主页，需求是在用户登录账号以后才可访问但是，在未登录的情况下，是可以直接访问到Main后台主页的就需要通过导航守卫来控制是否可以跳转如果没有登录，访问main主页的话，就会强制跳转到登录页面。

参与评论您还未登录，请先登录后发表或查看评论

Vue-router 多级路由

热门推荐

CCKing7的博客

01-11

1万+

1.在一级路由的基础上加上 children配置 redirect：路由重定向(也就是默认显示哪个页面) 2.结合vue的rout-link标签实现跳转 to="/父路由/子路由" 3.点击过之后路由会自动添加一个类名(并且是切换状态的) 类名：.router-link-active 结合路由重定向( redirect)实现点击切换字体颜色，背景等状态。

vue2中二级路由的配置

wfbxf的博客

06-03

758

【代码】vue2中二级路由的配置。

vue二级路由的配置

KongYue1202的博客

08-24

855

二级路由的配置在router中配置路由 import Vue from 'vue' import VueRouter from 'vue-router' // @ 指向src 用./容易混 import Comingsoon from '@/views/Film/Comingsoon' import Nowplaying from '@/views/Film/Nowplaying' import Mess from '@/views/Mess' import Person from '@/views/P

vue动态路由实现多级嵌套面包屑的思路与方法

08-29

动态路由允许我们在路由配置中使用占位符（例如`:id`），使得单个路由可以匹配多个URL路径。 Vue Router中的动态路由通常通过`params`属性来传递参数，如`/b/:id`，这里的`:id`就是一个动态参数，可以在访问时替换...

基于vue-router 多级路由redirect 重定向的问题

10-18

在 vue-router 中配置多级路由并进行重定向，需要仔细处理每个级别的路由配置，确保路径书写正确且符合实际项目需求。当遇到重定向问题时，应根据具体情况分析可能的错误原因，如路径错误、参数传递不当等，并通过...

Vue三层嵌套路由的示例代码

08-27

Vue 三层嵌套路由的示例代码本篇文章主要介绍了 Vue 三层嵌套路由的示例代码，通过这个示例代码，我们可以学习如何在 Vue 中实现三层嵌套路由。下面，我们将逐步讲解这个示例代码的各个部分。首先，我们需要了解...

【Vue】面经基础版-二级路由配置

qq_39921135的博客

06-07

825

配置了嵌套路由，一定配置对应的路由出口，否则不会渲染出对应的组件。当在页面中点击链接跳转，只是部分内容切换时，我们可以使用嵌套路由。二级路由也叫嵌套路由，当然也可以嵌套三级、四级…1.在一级路由下，配置children属性。技巧：二级路由应该配置到哪个一级路由下呢？二级路由的path不需要加。:一级的路由path 需要加。2.配置二级路由的出口。

vue2——路由

weixin_45691995的博客

07-15

4459

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！作用：让不展示的路由组件保持挂载，不被销毁。(组件不展示就会被销毁)实现切换（active-class可配置高亮样式）include=“name”,name指的是组件名。作用：让路由组件更方便的收到参数。分类：全局守卫、独享守卫、组件内守卫。配置路由，声明接收params参数。实现路由跳转，让路由跳转更加灵活。作用：可以简化路由的跳转。作用：对路由进行权限控制。文件里面的内容复制到。

VUE_vue二级路由配置

小歪博客

06-17

660

二级路由配置path时前面不能有 " / " 在一级路径信息数组中添加一个children配置项： {path:'/hot',component:()=>import('@/views/Hot/index'), children:[ {path:'/',redirect:'film'}, //配置默认显示模板内容 {path:'film',component:{template:'<p>妖猫传</p>'}}.

Vue/ Vue 路由配置 (重温 ) 一级二级路由配置及路由各种方法重定向 (浏览器渲染)

m0_64494670的博客

11-15

6032

Vue/ Vue 路由配置 (重温 ) 一级二级路由配置及路由各种方法重定向 (浏览器渲染)

03.智慧商城——路由配置

m0_53951384的博客

11-16

183

配置路由出口, 配置 tabbar。配置一级路由，新建对应的页面文件。

vue 路由（二级）配置及详细步骤

weixin_34013044的博客

07-27

2386

1、安装插件（可以选择在初始化项目的时候安装） cnpm install vue-router --save-dev 2、将插件全局引入到项目中（main.js） import VueRouter from 'vue-router' 3、将插件注入到vue中（main.js） Vue.use(VueRouter) //全局使用该组件 4、创建组件（需要跳转的...

Vue2 配置、使用路由vue-router

HL0512的博客

05-21

1476

参考文档：https://v3.router.vuejs.org/guide/essentials/named-views.html#nested-named-views。注意安装版本问题，npm install vue-router 默认版本4.x 对应 Vue3路由配置。二、在src文件下创建 scr/router/index.js 文件。四、在App.vue根组件中添加router-view。Vue2 对应 Vue Router版本 3.x。三、在main.js注入路由。

vue二级路由

qq_44640731的博客

12-24

182

编写二级路由外卖网站北京 ...

Vue二级路由配置方法详解

对于多级路由（三级及以上），其配置逻辑与二级路由完全一致，只需在子路由中继续嵌套children即可无限延伸。此外，还可利用命名视图、路由守卫、懒加载等高级特性优化性能与权限控制。例如，采用() => import('...'...