Vue2.0 Vue路由 路由器的俩种工作模式_yasinawolaopo的 ...

Vue当中路由器的俩种工作模式

在我们学习Vue的路由时，总出现/#/官方一点的称呼这叫hash

路劲里面从#开始一直到#后面的所有的东西，都算作里面的hash值

hash值最大的特点就是

他不会随着http请求发给服务器

作用:如果没有hash值的存在就算是一个,也会当作是路径的一部分传给服务器。

有了hash值的存在，我写了一个路径，但是有一部分我不想给服务器就作为hash值存在

hash的特点:不会作为路径的一部分发给服务器

这个路由器有俩种工作模式，默认是开启了hash工作模式

特点就是有一个#

另一种工作模式: history

在我的router > index.js中有一个属性可以告诉路由器更改工作模式:

新开一个页签，输入localhost:8080

特点出来了:没有#

那么

hash和history的区别

1.路径区别:

• hash ==> /#/
• history ==> /

2.重要的区别

• hash中#虽然丑但是它的兼容性好
• history的/虽然好看，但是兼容性比hash的#略差

这还关系到项目上线问题

项目怎么上线

浏览器是不认识.vue的文件的，所以你得把public、src、App.vue、main.js...这一类的给打包(就是生成最纯粹的.html,.css,.js)

那怎么把.vue怎么打包?

打开package.json

之前一直npm run serve是为了开启8080这台内置的小服务器,用于支撑你的项目运行。

项目写完了，你要用的就是"build": "vue-cli-service build",(就是所谓的npm run build)build最大的特点就是可以生成最纯粹的html、css、js

这个生成的速度取决于你项目的大小也取决于你电脑硬盘读写的速度

然后结束后，你会发现出现了一个dist(本身就有打包的意思)的文件夹

js里的有js文件和map文件(webpack中提到的映射文件)

点击index.html文件，发现文件都没有了,是因为：

打包出来的文件必须放在服务器上进行一个部署动作

接下来就拿node.js 和express框架现场搭建一个微型的服务器

新建一个demo文件夹

想用express，第一步得安装和变成一个合法的包

package name不能大写命名

新建一个服务器主文件server.js

1.引入express

2.创建一个app服务实例对象,express直接调用

3.启端口监听,app.listen(端口号,回调函数(回调会收到一个错误判断))

4.随便给它配置一个后端的路由

5.启动服务器，控制台输入

访问5005端口能不能访问人的信息

想要美化页面，可以下载插件FeHelper

另一个问题

如果一个东西真的上线了，我得把我前端的哪些静态资源(静态资源就是html、css、js)放在里面任意的文件夹(但标准起还是static有的时候叫public)

新建一个static文件夹

可以随便写一个

demo.html

怎么让服务器去认识这个html文件

用到一个中间键app.use(express.static)

需要我们传入一个路径:

测试

写的更省心一点

demo.html改成index.html

这样就直接写localhost:5005就可以了,默认去找index.html，你也可以这样写

写到这个程度就可以直接进行部署了

把脚手架生成的dist文件夹里的文件直接放入/static就可以了,

先删除之前的.html文件

放上去以后有个特别严重的问题:

一点一点点击它好使(整个过程它是不走网络请求的)，一刷新就废了

因为服务器下只有一个/person

所以history是有这个问题的

hash模式就没这问题

验证:

找到router > index.js

重新打包

重新放入微型服务器上

重启服务器

执行上面的步骤就可以了，因为#后面(连同#)的路径是不会带给服务器的

history 404报错问题解决

这不管我们怎么写了，得是后端人员努力的配合你才行

哪些决定前端路由的，哪些是后端路由的

有很多种写法

这里给大家推荐一个node.js中的一个中间键是专门解决这个问题的

npmjs

这个中间键叫做connect-history-api-fallback 如果你不用这个东西你要自己一点一点写 正则匹配

微服务器vscode控制台 安装

引入

应用中间键，注意顺序,必须在这个静态资源(app.use(express.static(__dirname+'/static')))之前

去使用

这时你就神奇般的发现刷新没问题

还有一种野路子就是:nginx解决

它可以帮你解决这个是后端路由还是前端路由

总结

路由器的俩种工作模式

1.对于一个url来说，什么是hash值? -----#以及后面的内容就是hash值

2.hash值不会包含在HTTP请求中,即hash值不会带个服务器

3.hash模式:

(1).地址中永远带着#号,不美观

(2).若以后将地址通过第三方手机app分享,若app校验严格，则地址会标记为不合法

(3).兼容性较好

4.history模式:

(1).地址干净,美观

(2).兼容性和hash模式相比略差

(3).应用部署上线时需要后端人员支持，解决刷新页面服务器404的问题

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/16380.html。