Vue Router 面试题, 如何获取 Vue 页面中的 hash 变化?
Vue Router 面试题, 如何获取 Vue 页面中的 hash 变化?
QA
Step 1
Q:: 如何获取 Vue 页面中的 hash 变化？
A:: 可以使用 Vue Router 提供的 watch 方法来监听路由对象中的 hash 变化。例如：this.$router.watch((to, from) => { console.log('Hash changed:', to.hash); })。或者使用 window 对象的 hashchange 事件：window.addEventListener('hashchange', () => { console.log('Hash changed:', window.location.hash); });
Step 2
Q:: Vue Router 中如何实现路由懒加载？
A:: 可以使用 Vue 的异步组件技术，通过动态 import 实现路由懒加载。例如：const Foo = () => import('./Foo.vue'); const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] });
Step 3
Q:: 如何在 Vue Router 中定义嵌套路由？
A:: 在 routes 配置中通过 children 属性来定义嵌套路由。例如：const routes = [ { path: '/parent', component: Parent, children: [ { path: 'child', component: Child } ] } ];
Step 4
Q:: 如何在 Vue Router 中进行导航守卫？
A:: Vue Router 提供了全局守卫、路由守卫和组件内守卫。全局守卫包括 beforeEach 和 afterEach，路由守卫包括 beforeEnter，组件内守卫包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。例如：router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !auth.isAuthenticated()) { next('/login'); } else { next(); } });
用途
面试这些内容是因为 Vue Router 是 Vue`.`js 项目中进行页面导航和管理的核心部分。了解和掌握 Vue Router 的使用对于开发复杂的单页面应用（SPA）非常重要。实际生产环境中，这些内容会在实现动态导航、权限控制、优化性能（如路由懒加载）、嵌套视图等场景中频繁使用。\n相关问题
Vue 进阶面试题, 如何获取 Vue 页面中的 hash 变化?
QA
Step 1
Q:: 如何获取 Vue 页面中的 hash 变化？
A:: 在 Vue 中，可以通过 window 对象的 onhashchange 事件监听 hash 的变化。可以在 created 或 mounted 生命周期钩子中添加事件监听器。例如：
mounted() {
window.addEventListener('hashchange', this.handleHashChange);
},
methods: {
handleHashChange() {
console.log(window.location.hash);
}
}
通过这种方式，当 URL 中的 hash 变化时，handleHashChange 方法就会被触发，获取并处理新的 hash 值。
Step 2
Q:: Vue 路由中 hash 模式与 history 模式的区别是什么？
A:: 在 Vue Router 中，hash 模式使用 URL 中的 '#' 来模拟一个完整的 URL，而 history 模式使用浏览器提供的 history.pushState API 来处理 URL，且没有 '#'。hash 模式不需要服务器配置即可工作，而 history 模式则需要服务器进行配置以确保路由路径的正确解析。
Step 3
Q:: 如何在 Vue 项目中实现自定义的路由守卫？
A:: 在 Vue Router 中，可以使用 beforeEach、beforeResolve 和 afterEach 钩子来实现自定义的路由守卫。beforeEach 在每次路由变化之前执行，beforeResolve 在组件内的守卫和异步路由组件被解析之后执行，afterEach 则是在路由跳转完成后触发。通过这些钩子可以实现权限验证、动态加载、登录状态检查等功能。例如：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next({ path: '/login' });
} else {
next();
}
});
用途
在实际的生产环境中，监听 hash 变化通常用于处理单页面应用程序（SPA）中的导航与状态管理。hash 模式的路由特别适合于那些不需要服务器配置的应用程序。同时，了解 hash 变化也有助于处理一些与 URL 相关的功能，例如实现锚点导航、前进后退功能等。因此，这个面试题的目的是考察候选人对 Vue 路由系统的掌握程度，了解他们是否能够处理实际项目中的路由管理问题。\n相关问题
Vue 工具和库面试题, 如何获取 Vue 页面中的 hash 变化?
QA
Step 1
Q:: 如何获取 Vue 页面中的 hash 变化？
A:: 在 Vue 中，可以使用 window.onhashchange 事件来监听 URL 的 hash 变化。通过该事件的回调函数，你可以获取新的 hash 值并执行相应的逻辑。例如：
window.onhashchange = function() {
console.log('New hash:', window.location.hash);
};
此外，如果你使用 Vue Router，它内部已经封装了对 hash 变化的监听，你可以通过 watch 或 beforeRouteUpdate 钩子函数来捕获这些变化。
Step 2
Q:: Vue Router 如何处理 hash 模式？
A:: Vue Router 提供了两种模式：hash 和 history 模式。在 hash 模式下，URL 中的 hash 部分（#后面的内容）用于模拟完整的 URL，因此浏览器不会发送额外的请求。Vue Router 会监听 URL 的 hash 变化并更新视图。配置 Vue Router 使用 hash 模式非常简单，只需在实例化 Vue Router 时指定 mode: 'hash' 即可。
const router = new VueRouter({
mode: 'hash',
routes: [...]
});
Step 3
Q:: 如何手动触发 Vue Router 中的 hash 变化？
A:: 在 Vue 中，可以使用 this.$router.push 或 this.$router.replace 方法来手动更改 URL 中的 hash 部分。对于直接操作 hash 的情况，也可以直接修改 window.location.hash。例如：
this.$router.push('/new-hash');
// 或者
window.location.hash = '#new-hash';