VUE3前端开发入门系列教程四:路由与页面切换

路由配置:src/router/index.js

指定URL链接转到相应的页面,比如访问http://x.x.x.x/home/about,实际访问的src/views/About.vue

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
	{ path: '/', redirect: '/login', meta: { needLogin: false } },
	{ path: '/login', name: 'login', meta: { needLogin: false }, component: () => import('@/views/Login.vue') },
	{ path: '/home', name: 'home', 
		meta: { needLogin: true }, 
		redirect: '/home/index',
		children: [
			{ path: 'index', components: {
				home: () => import('@/views/HomeIndex.vue') 
			}},
			{ path: 'about', components: {
				home: () => import('@/views/About.vue')
			}}
		],
		component: () => import('@/views/Home.vue')
	},
	
];

const router = createRouter({
	history: createWebHistory(),
	routes,
});

router.beforeEach((to, from, next) => {
	let getFlag = localStorage.getItem('Flag')
	if (getFlag === 'isLogin') {
		next()
	} else {
		if (to.meta.needLogin) {
			next({path: '/login'})
		} else {
			next()
		}
	}
})

export default router;


应用src/views/Home.vue

页面切换,home页面链接点击方式to="/home/about"




发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章