Vue中的多级路由（嵌套路由）

最新推荐文章于 2025-06-11 02:05:47 发布

原创最新推荐文章于 2025-06-11 02:05:47 发布 · 646 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在 Vue.js 应用中配置子路由。通过使用 children 属性，可以为父级路由设置多个子级路由，同时展示了正确的路径书写方式以确保正确跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.配置路由规则，使用children配置项：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			// 通过children配置子级路由
			children:[
				{
					path:'news',  //此处一定不要写成：/news
					component:News,
				},
				{
					path:'message', //此处一定不要写成：/message
					component:Message,
				}
			]
		}
	]
})

2.跳转要写完整路径：