- 正确答案：vue-router 是 Vue.js 官方的路由管理器，用于构建单页应用（SPA）。它通过将组件映射到路由，实现视图与 URL 的绑定。页面跳转的主要方法有两种：声明式导航（使用标签）和编程式导航（调用 router 实例的方法，如 push、replace、go 等）。 - 解答思路：首先明确 vue-router 的作用是实现前端路由，即在不刷新页面的情况下动态切换视图。然后区分两种跳转方式：一种是在模板中直接使用的标签方式（声明式），另一种是在 JavaScript 中通过调用方法实现（编程式）。接着分别列举具体 API 并说明其行为差异，最后可补充命名路由、命名视图、路由传参等扩展知识以体现深度。 - 深度知识讲解： 1. vue-router 的核心原理基于浏览器的 History API 或 hash 模式来监听 URL 变化，并根据当前路径渲染对应的组件。 - hash 模式：使用 URL 的 hash 部分（#后面的内容），如 http://example.com/#/home。优点是兼容性好，不需要服务器配置；缺点是 URL 不够美观。 - history 模式：使用 HTML5 History API（pushState、replaceState），URL 更干净，如 http://example.com/home。但需要服务器配置支持，否则刷新页面会 404。 - abstract 模式：不依赖浏览器环境，适用于非浏览器环境（如 Node.js 或测试环境）。 2. 路由匹配机制： vue-router 使用 path-to-regexp 库将路由路径字符串转换为正则表达式进行匹配。例如 '/user/:id' 会被编译成一个正则，用于提取动态参数 id。 3. 组件注入机制：在创建 Vue 实例时，通过 Vue.use(VueRouter) 安装插件，该插件利用 Vue.mixin 在所有组件创建前混入 beforeCreate 钩子，使得每个组件都能访问 this.$router 和 this.$route。 - $router：指向 Router 实例，提供导航方法（push, replace 等） - $route：当前激活的路由信息对象，包含 path, params, query, matched 等属性 4. 编程式导航方法详解： - router.push(location, onComplete?, onError?) 添加一条新记录到浏览器历史栈，点击后退可返回。等价于。示例：this.$router.push('/home') 或 this.$router.push({ name: 'User', params: { id: 123 } }) - router.replace(location, onComplete?, onError?) 替换当前历史记录，不会留下原页面的记录，无法后退到上一页。示例：this.$router.replace('/login') - router.go(n) 在历史记录中前进或后退 n 步，类似 window.history.go(n) 示例：this.$router.go(-1) 返回上一页；this.$router.go(1) 前进一页 - router.back() 和 router.forward() 分别是 go(-1) 和 go(1) 的别名 5. 导航守卫机制（拓展知识点）： vue-router 提供了全局、路由独享、组件内三种守卫，用于控制导航流程，如权限校验、页面离开确认等。例如 beforeEach 守卫可以拦截每次跳转，常用于登录验证。 6. 路由懒加载（性能优化）：使用动态 import() 实现组件按需加载，减少首屏体积。示例：const Home = () => import('./views/Home.vue') - 代码示例： // main.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from './views/Home.vue' import User from './views/User.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/user/:id', name: 'User', component: User } ] const router = new VueRouter({ mode: 'history', // 或 'hash' routes }) new Vue({ router, render: h => h(App) }).$mount('#app') // App.vue 中使用声明式导航 // User.vue 获取参数 - 扩展知识： - 命名视图：一个页面同时展示多个独立路由视图，使用多个，配合路由配置中的 components 字段。 - 路由嵌套：父子路由结构，子路由的 path 不以 / 开头，则继承父级路径。 - 滚动行为：scrollBehavior 可自定义页面切换时的滚动位置。 - 动态路由添加：router.addRoute() 可在运行时动态注册新路由，适用于权限路由场景。综上所述，掌握 vue-router 不仅要会使用跳转方法，还需理解其背后的设计模式（如观察者模式监听 history 变化）、组件通信机制、以及与 Vue 响应系统的集成方式。这些底层原理有助于应对复杂项目中的路由问题。

众安保险前端一面

全站热榜

创作者周榜