Vue嵌套(多级)路由
2023-09-11 14:22:31 时间
前言
嵌套路由就是在路由里面继续加一个新的路由。也叫多级路由,其实就是套娃
在开发中,很少会套到六层路由,一般到达4或5层路由已经达到极限了,明白了路由的规律,不管套多少层都是一样的,下面演示二级路由
配置多级路由(childen)
如下图所示,目前都是一级路由
如果想要配置多级路由,继续在路由里面配置即可
这里要用到children配置项,它的值是一个数组,因为这个一级路由可能有n多个子路由
children里面的path不需要加杠了,底层遍历的时候会自动加入
// 该文件专门用于创建整个应用的路由器
// 引入路由器
import VueRouter from "vue-router";
// 引入组件
import Abotu from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
// 创建并且暴露文件一个路由器
export default new VueRouter({
// 配置路由 本质是一个数组,在里面配置多组路由,每一个路由都是一个key和value映射对象
routes:[
{
path:'/about',
component:Abotu
},
{
path:'/home',
component:Home,
//配置子路由
children:[
// 第一个子路由
{
// 此时path不需要加杠了,底层遍历的时候会自动加入
path:'news',
component:News
},
// 第二个子路由
{
path:'message',
component:Message
}
]
},
]
})
使用多级路由
配置完多级路由之后,使用的必须把一级路由和二级路由完整的路径写到to属性中
总结
1 配置路由规则,使用children配置项:
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写:/news
component:News
},
{
path:'message',//此处一定不要写:/message
component:Message
}
]
}
]
2 跳转(要写完整路径)
<router-link to="/home/news">News</router-link>
相关文章
- Vue笔记:vue-router
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- (转)windows环境vue+webpack项目搭建
- VUE - 路由跳转时设置动画效果
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue-cli3路由vue-router用法
- [Vue @Component] Extend Vue Components in TypeScript
- vue.js 3.2.22:多选上传图片带缩略图可删除
- [Vue] Get up and running with vue-router
- vue v-for打印九九乘法表
- 【视频】vue指令之v-else-if
- vue-router动态路由示例
- 一个典型的Vue应用的App.vue
- 怎样给vue项目重命名?怎样修改vue项目的title标题?vuejs项目:路由跳转时更改页面title名称
- vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)
- 如何在VUE单页面引入CSS、JS(CDN链接)
- Vue实现刷新当前路由
- vue-route(三)后台管理路由配置
- 155:vue+openlayers 设置地图的反转色、复古色、灰度图、原始图
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue中路由守卫的具体应用
- 谈谈vue的路由守卫和keep-alive后生命周期
- 【vue】vue的插值语法及常用指令的应用_02
- Vue学习笔记之Vue中的路由使用
- 基于Java+SpringBoot+Vue+uniapp前后端分离图书阅读系统设计与实现
- 【三十天精通Vue 3】第九天 Vue 3 路由详解
- Vue 组件的定义、组件的使用、什么是路由、路由的定义和使用、nrm的安装使用