亲宝软件园·资讯

展开

vue路由及vue-router模式

Serendipity 人气:0

前言

路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化。本文来总结一下路由变化和vue-router中的路由模式区别相关知识点。

1、什么是前端路由

(1)后端路由阶段

早期的页面都是由html页面在服务端渲染的,服务端直接返回给客户端渲染好的html页面供展示,一个页面对应一个URL,首先向服务端请求对应的URL,服务器根据此URL去匹配对应的controller,最终生成html页面返回给客户端。这种方法有利于SEO的优化,但是这种页面html和数据逻辑混合在一块,开发人员开发维护起来困难。

(2)前后端分离路由阶段

随着Ajax的出现,由了前后端分离的开发方式,后端只负责逻辑处理和返回数据,前端只负责通过ajax将数据渲染到页面。

(3)单页面应用阶段

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.也就是前端来维护一套路由规则。

2、vue-router 提供了 hash 和 history 两种路由模式

vue-router的作用就是通过改变URL,在不重新请求页面的情况下,更新页面视图。简单的说就是,虽然地址栏的地址改变了,但是并不是一个全新的页面,而是之前的页面某些部分进行了修改。要想解决上面的问题,前提需要知道浏览器window的history对象和location对象的hash属性(详情见 history对象详解),这两个对象分别存在页面路径跳转,但是页面不刷新的功能。

(1)hash模式

对应了location对象的hash属性,vue-router 默认 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

location.hash 对应 "(#)" 后面的字符串,比如:https://xxx.cn/xxx/6844904062698127367#heading  对应的值为 "#heading",后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。另外每次  hash  值的变化,还会触发 hashchange  这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作:比如下面的代码监听一个网页 hash 值变化

window.addEventListener('hashchange', function() {
            console.log('The hash has changed!')
        }, false);

当网页点击返回或者前进的时候,hash值会发生变化,会触发上面的hashchange事件并打印。

(2)history模式

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,同时还有popstate 事件来监听state变化,这样地址栏中路径就没有了"#",但是当用户使用了刷新等操作的时候,浏览器会给服务器发送请求,为了避免这种情况出现,所以这个实现需要服务端的支持,需要把所有路由都重定向到根路由,这里省略服务端的配置。

window.addEventListener('popstate', function() {
            console.log('The state has changed!')
        }, false);

(3)两种模式的比较

 同:hash和history都是属于浏览器自身的特性,Vue-router只是利用了这两个特性(通过调用浏览器接口)来实现前端路由。

  不同:hash模式 会在浏览器的URL中加入'#',而HTM5History就没有'#'号,URL和正常的URL一样。

history比于直接修改hash主要有以下优势:a、pushState设置的新URL可以是与当前URL同源的任意URL;而hash只可修改#后面的部分,故只可设置与当前同文档的URL;b、pushState设置的新URL可以与当前URL一模一样,这样也会把记录添加到栈中;而hash设置的新值必须与原来不一样才会触发记录添加到栈中;c、pushState通过stateObject可以添加任意类型的数据到记录中;而hash只可添加短字符串,且pushState可额外设置title属性供后续使用。

补充:路由模式解析

要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置。

如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢。

这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷新,页面的状态就被维持在浏览器中了。

vue-router中默认使用的是hash模式,也就是会出现如下的URL:,URL中带有#号

我们可以用如下代码修改成history模式

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
  <strong>mode: </strong><strong>'history'</strong><strong>,</strong>
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

这样子URL中的#号就被去除了。

实际上存在三种模式:

Hash: 使用URL的hash值来作为路由。支持所有浏览器。

History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。

总结

加载全部内容

相关教程
猜你喜欢
用户评论