路由配置：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"