vue-router

一、介绍

vue-router 是 vue 的一个插件。

为什么使用 vue-router 这个插件？

由于 vue 为单页面应用，整个网页只有一个HTML网页，网页中的内容为一个个独立的组件，如果通过a 标签的跳转会从当前页面跳转到另一个页面，页面会重新加载，相当于重新当开了一个页面，就违背了vue 单页面应用的概念。

作用：它可以让我们的页面在不刷新整个网页的情况下，按照 url 进行跳转，并且能够渲染出对应url 的组件中的内容。

路由的两种方式

hash 方法：

hash模式的url默认带有#，location.hash的值就是url的#后面的内容。

特点：

• hash值会存现客户端的url中，没有请求后端服务器。

• hash值的改变不会重新加载页面，只是单纯地在浏览器的访问历史中增加个记录，就是在栈结构中添加和移除数据，来实现浏览器的回退和前进控制hash的切换。

获取：通过 window.location.hash读取 # 后面的值。

原理：

通过 window.onhashchange() 函数进行监听，监听到 hash 发生变化时可以执行相应的代码。

hash值变化对应的URL都会被浏览器记录下来，所以浏览器就能实现页面的前进和后退。

history 方法：

用户输入一个url时，服务器会接收请求并解析这个URL。

存在的api：

window.history.pushState 创建新的历史纪录

window.history.replaceState 修改当前历史纪录

window.history.back()

window.history.forward()

window.history.go(1)

通过 pushstate 把页面的状态保存在 state 对象中，

当页面的url再变回这个url时，

可以通过event.state取到这个state对象，对页面状态进行还原，

例如滚动条的位置，阅读进度，是都存储到state的里面，达到对页面状态进行还原。

缺点：服务端并没有定义这样的接口，直接访问时会出现404页面。

两种路由的区别：

hash 不需要服务端的支持，history 需要服务端配置支持。

二、都有什么功能

router-link

介绍：

该标签是一个 vue-router 中已经内置的组件，它会被解析为<a>标签。

路由的跳转，根据地址进行跳转。

通过router-link进行跳转不会跳转到新的页面，也不会重新渲染，会选择路由所指的组件进行渲染。

属性：:to、replace、tag 。。。

router-view

该标签会根据当前的路径，动态渲染出不同的组件对应的内容。

另：

外面可以包裹 <keep-alive></keep-alive>标签，作用是可以缓存当前的状态，组件跳转之后再返回组件时还会存储之前的信息。

重定向

介绍：用户在访问地址 A 的时候，强制用户跳转到地址 C ，展示特定的组件页面。

api: redirect

作用例子：当用户登录过某个网页时，再次进入不展示登录页面，直接进入到主页。

路由懒加载

介绍

在需要的时候进行加载对应的路由组件。

为什么使用?

对于 vue单页面应用，运用webpack打包后的文件将会异常的大，项目build打包后，一般情况下，会放在一个单独的js文件中，造成进入首页时，需要加载的内容过多，时间过长 ，运用懒加载则可以将页面进行划分，需要的时候加载页面，可以减少首页加载用时。

作用：

将路由对应的组件打包成一个个的js代码块

只有在这个路由被访问到的时候，才加载对应的组件，否则不加载

实现（三种）：

1. import实现路由懒加载 const F = () => import('../components/F')

2. Vue异步加载技术component: resolve => require(['放入需要加载的路由地址'], resolve)

3. webpack提供的require.ensure()

导航守卫

通过一些钩子函数可以在路由跳转之前，结束之后调用一些事件，来处理当前的页面状态。

• router.beforeEach 全局前置守卫，进入路由之前

• router.beforeResolve在 beforeRouteEnter 调用之后调用

• router.afterEach 进入路由之后

组件内三个钩子函数：

beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave

路由元信息

定义路由的时候可以配置 meta 值

作用：浏览器标签上可以设置信息。