vue 子路由+导航栏

m0_68332973

已于 2023-06-02 11:44:49 修改

阅读量129

点赞数

文章标签： vue

于 2023-06-01 23:42:06 首次发布

本文链接：https://blog.csdn.net/m0_68332973/article/details/130998044

版权

文章展示了如何使用VueRouter创建应用的路由配置，包括重定向、命名路由、动态导入组件以及设置子路由。在组件中，通过$router.push实现导航到子路由路径。此外，还提及了在方法中处理路由选择的逻辑。

摘要由CSDN通过智能技术生成

1.效果

2.目录结构

3.router目录下index.js

//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
		{
		    path:'/',
			redirect:"/personMain",
		    component:() =>import ("../page/person/person")
		},
        
		{
		    path:'/Regsiter',
			name:'Regsiter',
		    component:() =>import ("../page/regsiter")
		},
		{
		    path:'/Login',
			name:'Login',
		    component:() =>import ("../page/login")
		},
		{
		    path:'/personMain',
			name:'Main',
		    component:() =>import ("../page/person/person"),
			children:[
				{
					path:'my',
					name:"my",
					component:()=>import("../page/person/view/my")
				},
				{
					path:'search',
					name:"search",
					component:()=>import("../page/person/view/search")
				},
				{
					path:'issue',
					name:"issue",
					component:()=>import("../page/person/view/issue")
				}
			]
		},
		{
		    path:'/adminMain',
			name:'Main',
		    component:() =>import ("../page/admin/admin"),
			children:[
				{
					path:'/analysis',
					name:"analysis",
					component:()=>import("../page/admin/view/analysis")
				},
				{
					path:'/control',
					name:"control",
					component:()=>import("../page/admin/view/control")
				}
			]
		}
    ]
})

4.使用子路由

mounted() {
			this.$router.push('/personMain/my')
		},
	    methods: {
		  handleSelect(index) {
		        console.log(typeof index)
		  		if(index=="1")
		  			this.$router.push('/personMain/my')
		  		else if(index=="2")
		  			this.$router.push('/personMain/search')
		  		else if(index=="3")
		  			this.$router.push('/personMain/issue')
		  },