vue实现页面管理
Vue 实现页面管理的方法
使用 Vue Router 进行路由管理
Vue Router 是 Vue.js 的官方路由库，适合管理多页面应用的路由和页面跳转。通过配置路由表，可以实现页面的动态加载和权限控制。
安装 Vue Router：
npm install vue-router配置路由表（router/index.js）：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;在 main.js 中引入路由：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');动态路由和懒加载
通过动态路由和懒加载可以优化页面加载性能，按需加载组件。
配置懒加载路由：
const routes = [
{ path: '/', component: () => import('../views/Home.vue') },
{ path: '/about', component: () => import('../views/About.vue') }
];路由守卫实现权限控制
路由守卫可以在页面跳转前进行权限验证或其他逻辑处理。
全局前置守卫示例：
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth(); // 自定义权限检查函数
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});使用 Vuex 管理页面状态
Vuex 是 Vue 的状态管理库，适合管理跨组件的共享状态。
安装 Vuex：
npm install vuex配置 Vuex 存储（store/index.js）：
import { createStore } from 'vuex';
export default createStore({
state: {
user: null,
pageTitle: 'Default Title'
},
mutations: {
setUser(state, user) {
state.user = user;
},
setPageTitle(state, title) {
state.pageTitle = title;
}
},
actions: {
updatePageTitle({ commit }, title) {
commit('setPageTitle', title);
}
}
});在组件中使用状态：
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const pageTitle = computed(() => store.state.pageTitle);
const updateTitle = (title) => {
store.dispatch('updatePageTitle', title);
};
return { pageTitle, updateTitle };
}
};组件化开发
将页面拆分为多个可复用的组件，提高代码的可维护性。
示例组件结构：
src/
components/
Header.vue
Sidebar.vue
Footer.vue
views/
Home.vue
About.vue使用插槽（Slots）实现布局管理
通过插槽可以灵活地管理页面布局。
布局组件示例（Layout.vue）：
<template>
<div class="layout">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>使用布局组件：
<template>
<Layout>
<template #header>
<h1>Page Title</h1>
</template>
<p>Main content goes here.</p>
<template #footer>
<p>Footer content</p>
</template>
</Layout>
</template>响应式设计
使用 Vue 的响应式特性动态调整页面布局或内容。
示例：根据屏幕大小调整布局
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const isMobile = ref(false);
const checkScreenSize = () => {
isMobile.value = window.innerWidth < 768;
};
onMounted(() => {
window.addEventListener('resize', checkScreenSize);
checkScreenSize();
});
onUnmounted(() => {
window.removeEventListener('resize', checkScreenSize);
});
return { isMobile };
}
};
