vue3路由配置

最新推荐文章于 2024-06-18 16:31:42 发布

月影星云

最新推荐文章于 2024-06-18 16:31:42 发布

阅读量320

点赞数

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yyxy_gis/article/details/129260355

版权

vue3 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1、在router文件夹下创建index.js

import { createRouter, createWebHashHistory } from "vue-router";
import routes from "./routes";

let router = createRouter({
	history: createWebHashHistory(process.env.BASE_URL),
	routes,
});

router.beforeEach((to,from,next)=>{
 	if(to.path==='/home'){
 		if(!sessionStorage.getItem('token')){
 			next('/login');
 			return;
 		}
 	}
 	next();
})

export default router;

2、在router文件夹下创建routes.js

export default [
	{
		path: '/',
		redirect: "/login",
	},
	{
		path: '/login',
		name: 'login',
		meta:{ title: "登录", icon: "" },
		component: () => import('../login.vue')
	},
	{
		path: '/views',
		name: 'views',
		meta:{ title: "基础数据管理", icon: "icon-wuzidian" },
		redirect: "/views/townLevel",
		component: () => import('../views/index.vue'),
		children: [
			{
				path: '/views/townLevel',
				name: 'townLevel',
				meta:{ title: "镇级管理", icon: "icon-build-full" },
				component: () => import('../views/townLevel/index.vue')
			},
			{
				path: '/views/villageTown',
				name: 'villageTown',
				meta:{ title: "乡村管理", icon: "icon-cunqingjianjie" },
				component: () => import('../views/villageTown/index.vue')
			},
			{
				path: '/views/personnel',
				name: 'personnel',
				meta:{ title: "人员管理", icon: "icon-renyuanguanli" },
				component: () => import('../views/personnel/index.vue')
			},
			{
				path: '/views/baseMsg',
				name: 'baseMsg',
				meta:{ title: "基础信息管理", icon: "icon-jichuxinxi" },
				component: () => import('../views/baseMsg/index.vue')
			},
			{
				path: '/views/crops',
				name: 'crops',
				meta:{ title: "农作物管理", icon: "icon-a-16-01" },
				component: () => import('../views/crops/index.vue')
			},
			{
				path: '/views/equipment',
				name: 'equipment',
				meta:{ title: "设备管理", icon: "icon-shebeiguanli" },
				component: () => import('../views/equipment/index.vue')
			},
			{
				path: '/views/videoMonitor',
				name: 'videoMonitor',
				meta:{ title: "视频监控管理", icon: "icon-shipinjiankong" },
				component: () => import('../views/videoMonitor/index.vue')
			},
			{
				path: '/views/largeHorn',
				name: 'largeHorn',
				meta:{ title: "大喇叭管理", icon: "icon-yangshengqi" },
				component: () => import('../views/largeHorn/index.vue')
			},
			{
				path: '/views/focusOn',
				name: 'focusOn',
				meta:{ title: "重点关注", icon: "icon-yanjing1" },
				component: () => import('../views/focusOn/index.vue')
			},
		]
	},
];