前端路由

本文详细解释了前端路由的概念及其与后端路由的区别,并介绍了前端路由的两种实现方式:History API 和 hash,同时探讨了它们的应用场景及优缺点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、什么是路由?

  路由是根据不同的 url 地址展示不同的内容或页面;

二、什么是前端路由?

  前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做(传统的项目是服务端根据 url 的不同,返回不同的页面实现的);

三、什么是后端路由?

  通过用户请求的url导航到具体的html页面;每跳转到不同的url,都重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据,然后和模板组合,返回HTML,也可以是直接返回模板HTML,然后由前端js再去请求数据,使用前端模板和数据进行组合,生成想要的HTML。

四、前后端路由优缺点对比

  优点:

  1.从性能和用户体验的层面来比较,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。

  2.在某些场合中,用ajax请求,可以让页面无刷新,页面变了但url没有变化,用户就不能复制到想要的地址,用前端路由做单页面网页就很好的解决了这个问题。

        缺点:

       使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存。

五、前端路由的两种实现原理

1.History API

    利用H5两个新增的API history.pushState 和 history.replaceState;

    缺点:不支持IE9及以下,无法做IE9的适配

2.hash

 根据监听哈希变化触发的事件 —— hashchange 事件;

六、前端路由的使用场景

前端路由更多用在单页应用上, 也就是SPA, 因为单页面应用基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

 

七、单页面与多页面应用的对比

### 前端路由配置方法与示例 前端路由是一种用于管理单页面应用程序 (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> ``` 以上内容涵盖了前端路由的基础配置及其高级特性,如懒加载路由守卫的应用。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值