Vue知识点：路由的两种工作模式

阿夏呀

于 2023-03-20 11:59:38 发布

阅读量110

点赞数

分类专栏：配置代理服务器部署前端代码文章标签： vue.js 路由模式部署代码，启动服务器

本文链接：https://blog.csdn.net/summer_cloudy/article/details/129625729

版权

配置代理同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

服务器

1 篇文章 0 订阅

订阅专栏

部署前端代码

1 篇文章 0 订阅

订阅专栏

1. 对于一个url来说，什么是hash值？
即：#及其后面的内容都是hash值
2. hash值不会包含在HTTP请求中，即hash值不会带给服务器
3. hash模式：
(1). 地址中永远带着#号，不美观
(2). 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
(3). 兼容性较好
4. history模式：
(1). 地址干净，美观
(2). 应用部署上下时需要后端人员配合，解决刷新页面服务端404的问题
(3). 兼容性和hash模式相比略差

5. 以下是模拟搭建微型服务端代码

(1). 新建文件夹demo,编辑器打开demo文件夹。需要node express须得安装，安装的第一步就是变成合法的包，输入命令：npm init
(2). 命名：package name: test_server, 后续直接回车
(3). 输入命令：npm i express 安装
(4). 安装完成后，在文件夹下新建server.js

//server.js

//引入express
const express = require('express') 

//创建一个app服务实例对象
const app = express()

//配置一个后端路由
app.get('/person',(req,res)=>{
   //给客户端返回一个人的对象
   res.send({
      name: 'chenmuxia',
      age: 18
   })
})

//端口监听(参数是端口号和回调对象,err是回调的错误对象)
app.listen(5005,(err)=>{
   if(!err){
      console.log('服务器启动成功了！')
   }
})

(5). 启动服务器，输入命令：node server，返回服务器启动成功了，可以打开浏览器，输入localhost:5005/person,就可以得到关于人的相关信息了
(6). 在demo文件夹下新建static文件夹，用来存放前端写完的代码，例如:index.html静态页面

//demo>>>static>>>index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>你好啊！陈慕夏</h2>
</body>
</html>

(7). 为了让static文件夹下的前端页面让服务器认识，需要借助express.static,专门用于指定静态资源

//server.js

//引入express
const express = require('express') 

//创建一个app服务实例对象
const app = express()

//借助express.static,用于指定静态资源
app.use(express.static(__dirname+'/static'))

//配置一个后端路由
app.get('/person',(req,res)=>{
   //给客户端返回一个人的对象
   res.send({
      name: 'chenmuxia',
      age: 18
   })
})

//端口监听(参数是端口号和回调对象,err是回调的错误对象)
app.listen(5005,(err)=>{
   if(!err){
      console.log('服务器启动成功了！')
   }
})

(8). 暂停服务器，输入'node server'重新启动，显示服务器启动成功后可访问静态资源页面index.html,浏览器输入localhost:5005/index.html或者直接访问localhost:5005默认找到index.html
(9). 找到前端项目下打包好的(脚手架生成的)文件:css文件夹、js文件夹、index.html文件以及favicon.ico放入demo文件夹下的static文件夹下，这一步也叫做部署前端代码
(10). 再次暂停服务器，输入'node server'重新启动,直接访问localhost:5005就可以看到前端写好的页面了
(11). 点击页面中的事件是没有问题的，但如果出现刷新页面，则会出现报错404问题
原因分析：点击页面中的事件没有问题是因为点击的时候前端路由发生改变并不涉及网络请求，但是页面刷新的时候等于重新请求网络，请求网络的时候没有/home/...等接口，只有/person，所以报错,这也是history路由模式的一个问题
(12). 将项目里的路由模式替换成hash模式，再次打包前端项目，将打包好的dist文件夹下的文件再次放入服务器下的static文件夹下，暂停服务器，输入'node server'重新启动，就可以发现浏览器中的地址带有#，然后点击，刷新页面时就不会报404的错误了,所以上线时路由模式必须使用hash模式

//router>>>index.js

//创建并暴露一个路由器
const router = new VueRoter({
   mode:'hash',
   routes:[
      ....
   ]
})

(13). 如果使用history模式的话，解决办法需要后端人员与之配合，简单处理需要安装服务器里的中间件connect-history-api-fallback，回到服务器中输入命令：npm i connect-history-api-fallback,在server.js中引入

//server.js

//引入express
const express = require('express') 

//引入connect-history-api-fallback
const history = require('connect-history-api-fallback')

//创建一个app服务实例对象
const app = express()

//需要在静态资源之前使用history
app.use(history())

//借助express.static,用于指定静态资源
app.use(express.static(__dirname+'/static'))

//配置一个后端路由
app.get('/person',(req,res)=>{
   //给客户端返回一个人的对象
   res.send({
      name: 'chenmuxia',
      age: 18
   })
})

//端口监听(参数是端口号和回调对象,err是回调的错误对象)
app.listen(5005,(err)=>{
   if(!err){
      console.log('服务器启动成功了！')
   }
})