Vue-router创建子路由的方法【路由嵌套】

原创已于 2022-06-29 20:08:14 修改 · 972 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-06-29 20:05:32 首次发布

Vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中配置Vue Router，包括重定向、父子路由的设置，以及如何导入并使用组件进行页面切换。通过示例展示了在路由配置文件中定义路由规则，实现不同路径下加载不同组件的功能。

import VueRouter from 'vue-router'
import Home from '../pages/Home'   // 引入组件
import PubTable1 from '../pages/PubTable1'   // 引入组件
import PubTable2 from '../pages/PubTable2'   // 引入组件

// 创建路由器
const router = new VueRouter({
	routes:[
		{
			// 访问根路径时，重定向到login组件
			path: '/', 
			redirect: 'home'
		},
		{
			name:'home', 	  // 父路由名
			path:'/home',	  // 父路由路径
			component:Home,   // 父对应组件名
			children: [
			  {
				name:'pubtable1',      						// 子路由名
				path: 'pubtable1',							// 子路由路径
				component: PubTable1						// 子对应组件名
			  },
			  {
				name:'pubtable2',      						// 子路由名
				path: 'pubtable2',							// 子路由路径
				component: PubTable2						// 子对应组件名
			  }
			]
		},
	]
})


export default router;