Vue-Router的两种路由模式

更新日期: 2022-02-03阅读: 1.1k标签: 路由

vue-Router有两个路由模式,分别是哈希hash模式和历史history模式,然后默认的是哈希hash模式。

现在有个问题是,我们了解这两个模式的区别吗?或者只是了解它的路径上有没有 # 这个符号的区别吗?


hash模式

hash模式是开发中默认的模式,它的URL带着一个#,例如:www.baidu.com/#/vue,它的hash值就是#/vue

hash的值会出现再URL里面的,但是不会出现再HTTP请求之中的,也就是说,它并没有向后端发起请求,对后端是没有影响的

我们看一下如果没有使用哈希在浏览器是怎么样的

https://www.fly63.com/index.html/home

在上面可以看出,如果万一后端没有给我们配备路由,我们容易丢失这个页面,请求不到这个URL。

再看看有哈希路由的

https://www.fly63.com/index.html#/home

我没有在后端配置这个路由,但是它依然可以加载到,说明

哈希路由它只是改变hash值,不会重新加载页面,这样的话跟我们app的体验是一样的,只是改变了样子,但是没有改变内在

而且这种模式浏览器支持度非常好,而且低版本的浏览器也支持,没有兼容性的问题。

目前来说,hash路由它被称为前端路由,作为单页应用的标准搭配了,但是这么好用原理知道多少呢?

我们来看一下它的实现原理

<body>
    <button id="btn">点击更改路径</button>

    <script>
        const btn = document.getElementById('btn')
        window.onhashchange = (e) => {
            console.log('old: ', e.oldURL);
            console.log('new: ', e.newURL);

            console.log('hash: ', location.hash);
        }
        btn.addEventListener('click', () => {
            location.href = '#/home'
        })
    </script>
</body>

上面我写了一个demo,hash模式的主要原理就是onhashchange()事件,使用onhashchange()事件的好处就是,在页面的hash值发生变化时,无需向后端发起请求

我通过传入一个事件对象,如果路由发生改变就会触发这个函数,分别打印新旧URL,然后通过location.hash获取到这个hash值。

而且,页面是无刷新的,我们看一下浏览器


这样看来,我们可以通过这样的路由来让我们的页面发生变化,而且不用给后端发起请求。

还有就是hash值变化对应的URL都会被浏览器记录下来,这样浏览器就能实现页面的前进和后退。而且这样用起来非常的流畅,像使用APP一样


history模式

history模式的URL中没有#,它使用传统的路由分发模式,就是说用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的处理,也就是它向服务器发起了一个请求差不错

先看demo

<body>
    <button id="btn">点击更改路径</button>

    <script>
        const btn = document.getElementById('btn')

        window.addEventListener('domContentLoaded', () => {
            console.log('path: ', location.pathname);
        })

        btn.addEventListener('click', () => {
            const state = {
                pathName: 'index'
            }
            history.pushState(state, '', 'index') //切换路由
            console.log('路由切换了: ', 'index');
        })

        window.onpopstate = (e) => {
            console.log('onpopstate', e.state, location.pathname);
        }
    </script>
</body>

我在点击btn的时候传入一个路由对象,假设他是index,然后我用history.pushState()切换了路由,模拟了网页路由的切换,一旦这个路由切换了,就会被监听到

然后我设想当我们浏览器前进后退的时候也会被监听到,所以加了window.onpopstate这个api,传入事件对象,监听它们路由的变化

我们看一下浏览器


当我进入的时候先打印出它的path: /history.html,然后我又点击了哪个按钮,切换了路由

然后我有按了浏览器的回退到了history这个路由,渲染了history这个页面,然后我又点击了一下前进按钮,它又渲染了index这个页面

然后为什么第一次回退会打印null/history.html呢,因为它的路径与对应关系的状态,因为我在一开始的history没有定义路径,所以为null,后来能打印是因为我定义了路径,换句话说就是,如果我后端没有配置它的路径,页面容易出现404,也就是页面丢失的状态

nginx配置

history模式需要服务器端的支持,这里以nginx为例,配置如下:

location / {
try_files $uri $uri/ /index.html;
}


总结

总体来说吧,hash模式和history模式都有各自的优势和缺陷,如果是说哪一个好用,具体要看应用场景。


链接: https://fly63.com/article/detial/11087

vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history

vue路由传参主要的3种方式

vue中路由传参主要的3种方式:query方式(push时使用path来匹配)、params模式(push时使用name来匹配)、location预声明参数模式(push使用path来匹配,但是它跟params模式不同)

vue动态加载路由_实现vue动态加载路由器设置

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现。

两种前端路由的实现方式

前后端分离开发模式,后端会把路由控制丢在前端,这几天再开发单页面小的项目,手动撸了个路由。前端路由实现有两种方法。HTML5 History API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。hash + location.onhashchange

vue动态路由_vue-router通过接口请求动态生成路由的实现

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

vue router 路由鉴权(非动态路由)

原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在beforeEach里直接判断了。

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢

vue-router 中参数传递(params,query)

query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

Node.js的路由

当服务端接收到HTTP请求时,可以通过onRequest() 获取到url, pathname,query,及paramParams参数;为了解析这些数据需要使用url和querystring模块

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!