vue-router原理

2018-08-21 本文已影响0人 tency小七

前提：

异步交互体验的更高级版本就是 SPA ,大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。

页面都是由组件组成的，只需要把组件和路径相对应起来，就能把组件渲染出来。

页面实现：在vue-router中, 它定义了两个标签和来对应点击和显示部分。就是定义页面中点击的部分，定义显示部分。

js中配置路由：首先要定义route,一条路由的实现，他是一个对象，由path和component组成。

 const routes = [
 {// 首页
 path: '/',
 component: () => import('src/pages/home/index.vue'),
 },
 {// 首页更多功能
 path: '/functionManage',
 component: () => import('src/pages/home/functionManage.vue'),
 },
  ]

创建router对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
router.js文件中
```
 const router = new VueRouter({
 routes,
   })
```
配置完成后，把router 实例注入到 vue 根实例中。
main.js文件中
```
 window.vm = new Vue({
    router,
   })
```

执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性，它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件，最后把组件渲染到标签所在的地方。
前端路由是通过改变URL，在不重新请求页面的情况下，更新页面视图。
目前在浏览器环境中这一功能的实现主要有2种:

利用URL中的hash；
在改变 url 的情况下，保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：
http://www.xxx.com/#/login
这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：
```
  function matchAndUpdate () {
     // todo 匹配 hash 做 dom 更新操作
  }
```

window.addEventListener('hashchange', matchAndUpdate)

利用H5中history；
14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 popstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

https://github.com/muwoo/blogs/issues/24

vue-router原理

前提：

猜你喜欢

热点阅读