###
前端路由配置方法与示例
前端路由是一种用于管理单页面应用程序 (SPA) 中不同视图的技术。以下是基于 Vue 和 Angular 的两种主流框架的
路由配置方式。
#### Vue.js
路由配置
Vue 使用 `vue-router` 来实现
路由功能，支持静态
路由和动态
路由的配置，并可以通过
路由守卫实现权限控制等功能[^1]。下面是一个简单的 Vue
路由配置示例：
```javascript
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { requiresAuth: true } // 自定义元信息
},
{
path: '/about',
name: 'About',
component: () => import('./views/About.vue') // 懒加载
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
//
路由守卫：全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login'); // 如果未登录，则跳转到登录页
} else {
next();
}
});
export default router;
```
上述代码展示了如何创建一个基本的 Vue
路由实例，其中包括路径映射、懒加载以及
路由守卫的功能。
#### Angular
路由配置
在 Angular 中，可以使用 `RouterModule` 实现
路由功能，并通过 `loadChildren` 属性来实现懒加载[^2]。以下是一个典型的 Angular
路由配置示例：
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule) },
{ path: 'about', loadChildren: () => import('./modules/about/about.module').then(m => m.AboutModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
```
此代码片段说明了如何利用 `loadChildren` 动态导入模块并实现懒加载。
#### HTML 结构中的 `<router-view>` 标签
无论是在 Vue 还是其他 SPA 框架中，都需要在模板文件中放置 `<router-view>` 或类似的占位符标签，以便渲染匹配当前
路由的组件[^3]。例如，在 Vue 项目的根组件中通常会有如下结构：
```html
<template>
<div id="app">
<header>...</header>
<main>
<!-- 渲染匹配的
路由 -->
<router-view></router-view>
</main>
<footer>...</footer>
</div>
</template>
```
以上内容涵盖了
前端路由的基础配置及其高级特性，如懒加载和
路由守卫的应用。
---
扫一扫
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
