路由

约 1236 字大约 4 分钟

2021-03-10

vue路由hash模式和history模式实现原理分别是什么，他们的区别是什么？

history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作

区别：

url 展示上，hash 模式有“#”，history 模式没有
刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由
兼容性，hash 可以支持低版本浏览器和 IE。

含义：把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

实现：

结合 Vue 的异步组件和 Webpack 的代码分割功能
- 可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise
  const Foo = () => Promise.resolve({ /* 组件定义对象 */ }) 复制代码
- 在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (spli
  import('./Foo.vue') // 返回 Promise 复制代码
结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件

const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]}) 复制代码

chunkconst Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') 复制代码

此题是考查项目实践能力，项目中基本都有路由守卫的需求，保护指定路由考查的就是这个知识点。

vue-router中保护路由安全通常使用导航守卫来做。

通过设置路由导航钩子函数的方式添加守卫函数。

在里面判断用户的登录状态和权限，从而达到保护指定路由的目的。

具体实现有几个层级：

全局前置守卫beforeEach、路由独享守卫beforeEnter或组件内守卫beforeRo-uteEnter。

以全局守卫为例来说，可以使用router.beforeEach((to,from,next)=>{})方式设置守卫。

每次路由导航时，都会执行该守卫，从而检查当前用户是否可以继续导航。

通过给next函数传递多种参数达到不同的目的，比如如果禁止用户继续导航可以传递next(false)。

正常放行可以不传递参数，传递path字符串可以重定向到一个新的地址等等。

这些钩子函数之所以能够生效，也和vue-router工作方式有关。

像beforeEach只是注册一个hook，当路由发生变化。

router准备导航之前会批量执行这些hooks，并且把目标路由to，当前路由from。

以及后续处理函数next传递给我们设置的hook。

作用范围：组件实例的获取

beforeRouteEnter(to,from,next) {
next(vm => {
})
}