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

最新推荐文章于 2024-05-06 20:31:51 发布

结城明日奈是我老婆

最新推荐文章于 2024-05-06 20:31:51 发布

阅读量811

点赞数 1

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/122459806

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

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

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

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

hash值最大的特点就是

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

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

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

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

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

特点就是有一个#

另一种工作模式: history

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

const router = new VueRouter({
    //mode: 'hash',//也是默认的
    mode:'history',
    routes:[...]
})

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

特点出来了:没有#

那么

hash和history的区别

1.路径区别:

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

2.重要的区别

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

这还关系到项目上线问题

项目怎么上线

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

那怎么把.vue怎么打包?

打开package.json

{
  "name": "hello_vue_text",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
}

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

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

npm run build

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

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

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

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

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

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

新建一个`demo`文件夹

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

npm init

package name不能大写命名

npm i express

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

1.引入express

const express = require('express')

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

const app = express()

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

app.listen(5005,(error)=>{
    //没有接收到错误，给个反应
    if(!error) console.log('服务器启动成功了')
})

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

//app.get(路由名,回调函数(有俩个参数request和response))
app.get('/person',(req,res)=>{
    //res.send():给客户端返回东西
    res.send({
        name: 'tom',
        age: 18
    })
})

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

node server

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

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

另一个问题

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

新建一个static文件夹

可以随便写一个

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>你好啊!</h1></h1>
</body>
</html>

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

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

app.use(express.static)//express.static:专门用于指定静态资源

需要我们传入一个路径:

app.use(express.static(__dirname+'/static'))

测试

localhost:5005/demo.html

写的更省心一点

demo.html改成index.html

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

localhost:5005/index.html

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

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

先删除之前的.html文件

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

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

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

所以history是有这个问题的

hash模式就没这问题

验证:

找到router > index.js

const router = new VueRouter({
    //mode: 'history'
    routes:[...]
})

重新打包

npm run build

重新放入微型服务器上

重启服务器

node server

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

history 404报错问题解决

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

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

有很多种写法

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

npmjs

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

微服务器vscode控制台安装

npm i connect-history-api-fallback

引入

var history = require('connect-history-api-fallback');

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

去使用

app.use(history)

//用到一个中间键app.use(express.static)
app.use(express.static(__dirname+'/static'))//express.static:专门用于指定静态资源

node server

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

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

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

总结

路由器的俩种工作模式

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

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

3.hash模式:

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

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

(3).兼容性较好

4.history模式:

(1).地址干净,美观

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

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

结城明日奈是我老婆

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2.0 Vue路由路由器的俩种工作模式

里面有路由器的俩种工作模式的使用和原理，适用场景；vue项目怎么打包；还有node express的node.js简单的微型服务器编写
复制链接

扫一扫

专栏目录