js 单页 路由

在JavaScript的单页应用（SPA）中，路由是指在单个HTML页面内，通过JavaScript来管理不同URL与页面内容之间的映射关系，从而实现无需重新加载整个页面就能切换页面内容的效果。

基础概念：

• 单页应用（SPA）：整个应用只有一个完整的页面，用户在应用内的导航不会导致页面的重新加载，而是通过动态更新页面的部分内容来实现。
• 前端路由：在单页应用中，前端路由负责根据URL的变化来更新页面的内容，通常使用JavaScript库或框架来实现。

相关优势：

1. 用户体验更好：页面无需完整加载，减少了等待时间。
2. 前后端分离：前端路由使得前后端可以更加独立地开发和部署。
3. SEO优化：通过服务端渲染（SSR）等技术，可以改善单页应用的搜索引擎优化。

类型：

• Hash路由：通过URL的hash值（#后面的部分）来管理路由状态。
• History路由：利用HTML5的History API来管理路由状态，URL更加美观。

应用场景：

• 单页应用（SPA），如React、Vue等框架构建的应用。
• 移动应用中的Web视图。
• 需要高度交互和动态内容的网页。

常见问题及解决方法：

1. 路由跳转后页面不刷新：这通常是路由配置或组件更新逻辑的问题。检查路由配置是否正确，以及组件是否监听了路由变化并作出相应更新。
2. 浏览器刷新后404：在使用History路由时，服务器需要配置相应的重定向规则，以确保刷新页面时能够正确返回index.html。
3. 路由参数丢失：在路由跳转时，确保传递的参数（如查询字符串或路径参数）被正确处理和接收。

示例代码（使用Vue Router作为前端路由库）：

• 安装Vue Router：npm install vue-router
• 路由配置：

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;

• 在Vue应用中使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');