• 技术文章 >web前端 >前端问答

    vue路由有哪两种模式

    青灯夜游青灯夜游2022-01-10 16:57:44原创75

    vue路由的两种模式:1、hash模式,其原理是onhashchange事件,可以在window对象上监听这个事件;2、history模式,可利用“history.pushState”的API来完成URL跳转。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    前后端分离 ===> 利用Ajax,可以在不刷新浏览器的情况下异步数据请求交互。

    单页应用(只有一个html文件,整个网站的所有内容都在这一个html里,通过js来处理不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的。为了实现单页应用 ==> 前后端分离 + 前端路由。(更新视图但不重新请求页面)

    前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,加载不同的组件,然后动态的渲染出区域 html 内容

    hash模式

    #后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。每次 hash 值的变化,会触发hashchange 这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作

    hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

    window.onhashchange = function(event){
     
        console.log(event.oldURL, event.newURL);
        let hash = location.hash.slice(1);
        document.body.style.color = hash;
     
    }

    上面的代码可以通过改变hash来改变页面字体颜色。

    当你选择mode类型之后,程序会根据你选择的mode 类型创建不同的history对象(hash:HashHistory 或 history:HTML5History 或 abstract:AbstractHistory)

    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }

    HashHistory有两个方法:HashHistory.push()将新路由添加到浏览器访问历史的栈顶 和 HashHistory.replace()替换掉当前栈顶的路由

    因为hash发生变化的url都会被浏览器记录(历史访问栈)下来,从而你会发现浏览器的前进后退都可以用了。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来。

    history模式

    因为HTML5标准发布,多了两个 API,pushState()replaceState()。通过这两个 API (1)可以改变 url 地址且不会发送请求,(2)不仅可以读取历史记录栈,还可以对浏览器历史记录栈进行修改。

    除此之外,还有popState().当浏览器跳转到新的状态时,将触发popState事件.

    修改历史状态

    包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

    window.history.pushState(stateObject, title, URL)
    window.history.replaceState(stateObject, title, URL)

    切换历史状态

    包括back,forward,go三个方法,对应浏览器的前进forward,后退back,跳转go操作。 有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转(也许叫跳更合适):

    区别:

    当用户刷新页面之类的操作时,浏览器会给服务器发送请求,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。

    history模式怕啥
    不怕前进,不怕后退,就怕刷新,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。

    在history模式下,你可以自由的修改path。history模式最终的路由都体现在url的pathname中,这部分是会传到服务器端的,因此需要服务端对每一个可能的path值都作相应的映射。

    当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

    router挂在到根组件

    new Vue({
      router
    })

    此时的router会被挂载到 Vue 的根组件this.$options选项中。在 option 上面存在 router 则代表是根组件。

    $router与$route的区别

    1. $route从当前router跳转对象里面可以获取name、path、query、params等(<router-link>传的参数由 this.$route.query或者 this.$route.params 接收)

    2. $router为VueRouter实例。想要导航到不同URL,则使用$router.push方法;返回上一个history也是使用$router.go方法

    【相关推荐:vue.js教程

    以上就是vue路由有哪两种模式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue 路由模式
    上一篇:jquery中的data是什么意思 下一篇:vue构建需要哪些目录
    php中文网线上培训班

    相关文章推荐

    • vue怎么控制元素的隐藏与显示• 带你深入了解vue2中的 v-model,看看如何让组件支持该语法• 推荐 20 个近期比较“火热”的Vue项目(值得收藏)• Vue实例要怎么挂载?聊聊实例挂载的过程• vue-resource和vuex有什么区别• vue有什么性能优化方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网