vue实现多个页面
Vue 实现多个页面的方法
在 Vue 中实现多个页面通常需要结合 Vue Router 进行路由管理。以下是实现多页面的核心步骤：
安装 Vue Router
通过 npm 或 yarn 安装 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';
createApp(App).use(router).mount('#app');创建页面组件
在 views 目录下创建页面组件（如 Home.vue 和 About.vue）：
<!-- Home.vue -->
<template>
<div>Home Page</div>
</template>添加路由视图
在 App.vue 中使用 <router-view> 显示页面：
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template>动态路由与参数传递
支持动态参数的路由配置：
{
path: '/user/:id',
component: User,
props: true
}在组件中通过 props 接收参数：
<script>
export default {
props: ['id']
}
</script>嵌套路由
实现嵌套页面结构：
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}在父组件中添加 <router-view> 显示子页面。
路由守卫
通过路由守卫控制页面访问权限：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login');
} else {
next();
}
});懒加载页面
优化性能，按需加载页面：
const About = () => import('../views/About.vue');通过以上步骤，可以实现 Vue 中的多页面应用，支持导航、参数传递和权限控制等功能。
