`vue` 的路由管理，vue router的使用

安装
大多数通过pnpm进行包管理
创建路由配置


// router/index.ts
 
import {createRouter,createWebHistory,createWebHash} from 'vue-router';
 
const routes = [{
  path:'/',
  name: 'Home',
  component:()=>import('@/views/Home/index.vue'),
}];
 
const router = createRouter({
  history:createWebHistroy(),
  routes,
});
 
export default router;

常搭配defineAsyncComponent来使用懒加载
在main.ts中引入router,并使用


import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
 
// 创建app
const app = createApp(App);
// 使用router路由
app.use(router);
// 挂载
app.mount('#app');

在.vue文件中在menu等导航组件中使用
在导航到的页面中使用

面试总结

因此，在项目中使用 Vue Router 时，我一般会： ① 定义清晰的路由结构与命名规范； ② 结合懒加载和路由守卫提升性能与安全性； ③ 根据部署环境选择 History 或 Hash 模式； ④ 利用 router-link 和 router-view 构建导航与视图； ⑤ 必要时使用动态路由和 addRoute 实现权限控制。

这样回答既涵盖了基本使用流程，又体现了工程化的思考和实践，对面试来说比较完整。

面试中回答 Hash 和 History 两种路由模式的区别，可以从URL 形式、实现原理、服务端配置、适用场景四个维度展开：

1. URL 表现形式

Hash 模式（createWebHashHistory）：路径中带 #，例如 http://example.com/#/home。 # 后面的部分就是 hash 值，它不会被包含在 HTTP 请求中，只作用于浏览器端。
History 模式（createWebHistory）：路径是标准的 HTML5 History，例如 http://example.com/home。路径没有特殊符号，和普通多页应用的 URL 完全一致。

2. 实现原理

Hash 模式：利用 window.onhashchange 事件监听 URL 中 # 之后的变化，当 hash 改变时，不向服务器发送请求，而是由前端路由匹配组件并渲染。兼容性好，即使浏览器不支持 HTML5 History API 也能正常工作。
History 模式：依赖 HTML5 新增的 history.pushState 和 history.replaceState 这两个 API，可以在不刷新页面的情况下修改浏览器地址栏的路径。同时监听 popstate 事件（用户点击前进/后退），当路径变化时，路由系统拦截并匹配组件。

3. 服务端配置要求

Hash 模式： # 后的内容不会被发送到服务器，所以后端无需任何特殊配置。即使路径错误，服务器也只返回首页或对应的正确资源。部署非常简单，适合静态文件托管。
History 模式：真实的路径会被浏览器发送到后端，如果后端没有配置相应的回退规则（例如 Nginx 的 try_files），用户直接访问或刷新 /home 时，服务器会返回 404，因为后端并没有 /home 这个实际文件。因此必须与后端协调，将所有非 API 路由的请求重定向到 index.html。

4. 适用场景

Hash 模式：适用于对 SEO 无要求、后端无法或不方便配置的场景，如内部管理系统、活动页、纯静态部署等。兼容性最好，所有浏览器都支持。
History 模式：适用于需要 SEO 的 C 端项目（如官网、商城），因为干净的 URL 对搜索引擎更友好。但需要服务端配合，且对部署环境有一定要求（Node 服务、Nginx 反向代理等）。

5. 补充区别

锚点功能冲突：Hash 模式下 URL 中的 # 本意是页面锚点，如果业务中需要用到锚点跳转，会与路由冲突；History 模式则不受影响。
应用举例：Vue Router 默认推荐使用 createWebHistory 以获得更好的用户体验，但在无法控制服务器的场景下通常回退到 createWebHashHistory。

一句话总结： Hash 模式通过 # + hashchange 实现，无需后端配合，兼容性好但 URL 不美观；History 模式通过 pushState + popstate 实现，URL 干净需要后端 fallback，更适合对 SEO 有要求的项目。

vue 的路由管理，vue router的使用