广告公司 网站模板,百度竞价代理商,想学营销策划去哪里学,网站建设成本控制从一篇日记说起我是一个小前端#xff0c;我有写日记的习惯2020年10月17 天气 晴今天天气不错#xff0c;心情也跟着好起来了辛辛苦苦加班两个星期终于完成了产品需求#xff0c;到了要上线的时候了#xff0c;嘴里也不知不觉哼起了“劳资今晚不加班”的小曲一顿操作猛如虎… 从一篇日记说起我是一个小前端我有写日记的习惯2020年10月17 天气 晴今天天气不错心情也跟着好起来了辛辛苦苦加班两个星期终于完成了产品需求到了要上线的时候了嘴里也不知不觉哼起了“劳资今晚不加班”的小曲一顿操作猛如虎终端执行 npm run build 一把梭将构建产出的 dist 文件夹扔给了发际线愈发上移的后端同学让其帮忙布署到服务器上不一会后端同学说项目布署好了并扔回给了我一个线上链接怀着激动的心用颤抖的手慌忙点开我没有放过页面上的每一个细节毕竟都是用自己的头发换回来的页面的上每一个按钮我都要复点一次以确保它们没有问题几分钟后我的脸上慢慢洋溢出来了笑容因为我认为这是一次完美的“线上行动”赶紧平复了一下心情在公司项目里 BOSS自豪的表示项目已完美上线BOSS 们可以验收 Wow! 平常高冷女神范的运营小姐姐给我发消息了哈哈一定是要夸我写的这个系统太好用了吧点开赶紧自己试了试只要一刷新还真是这样今天又得加班了!完为什么会出现404我们先来看一下我们给到后端的dist文件可以看到dist下只有一个 index.html 文件及一些静态资源这个是因为Vue是单页应用(SPA)只有一个index.html作为入口文件其它的路由都是通过JS来进行跳转接着我们再来分析一下后端 nginx 的配置server { // 监听80端口 listen 80; // 定义你的站点名称 server_name website.com; // 根据请求 URI 设置配置 location / { // 站点根目录这里为 vue 构建出来的 dist 目录 root /www/dist; // 站点初始页为index.html 或 index.htm index index.html index.htm; }}我们现在可以根据 nginx 配置得出当我们在地址栏输入 website.com 时这时会打开我们 dist 目录下的 index.html 文件然后我们在跳转路由进入到 website.com/login关键在这里当我们在 website.com/login 页执行刷新操作nginx location 是没有相关配置的所以就会出现 404 的情况为什么hash模式下没有问题router hash 模式我们都知道是用符号#表示的如 website.com/#/login, hash 的值为 #/login它的特点在于hash 虽然出现在 URL 中但不会被包括在 HTTP 请求中对服务端完全没有影响因此改变 hash 不会重新加载页面hash 模式下仅 hash 符号之前的内容会被包含在请求中如 website.com/#/login 只有 website.com 会被包含在请求中 因此对于服务端来说即使没有配置location也不会返回404错误单页应用(SPA)概念我们前面有提到单页应用那什么是单页应用呢单页应用单页应用(single-page application)缩写SPA 是一种网络应用程序或网站的模型它通过动态重写当前页面来与用户交互而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验使应用程序更像一个桌面应用程序。在单页应用中所有必要的代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面。尽管可以用位置散列或HTML5历史API来提供应用程序中单独逻辑页面的感知和导航能力但页面在过程中的任何时间点都不会重新加载也不会将控制转移到其他页面大白话来讲一个杯子早上装的牛奶中午装的是开水晚上装的是茶我们可以发现变的始终是内容而容器还是那个容器当然每种技术都有其利弊单页应用也是如此利:无刷新体验这个应该是最显著的有点由于路由分发直接在浏览器端完成页面是不刷新对用户的响应非常及时因此提升了用户体验完全的前端组件化前端开发不再以页面为单位更多地采用组件化的思想代码结构和组织方式更加规范化便于修改和调整弊:首屏较长要在一个页面上为用户提供产品的所有功能在这个页面加载的时候首先要加载大量的静态资源这个加载时间相对比较长不利于 SEO单页页面数据在前端渲染就意味着没有 SEO或者需要使用变通的方案Router的实现为了让大家加深大家对 Router 的理解这里我们实现一个最简洁的 Routerhash 模式核心通过监听url中的hash来进行路由跳转// 定义 Routerclass Router { constructor () { this.routes {}; // 存放路由path及callback this.currentUrl ; // 监听路由change调用相对应的路由回调 window.addEventListener(load, this.refresh, false); window.addEventListener(hashchange, this.refresh, false); } route(path, callback){ this.routes[path] callback; } push(path) { this.routes[path] this.routes[path]() }}// 使用 routerwindow.miniRouter new Router();miniRouter.route(/, () console.log(page1))miniRouter.route(/page2, () console.log(page2))miniRouter.push(/) // page1miniRouter.push(/page2) // page2history 模式history 模式核心借用 HTML5 history apiapi 提供了丰富的 router 相关属性先了解一个几个相关的apihistory.pushState 浏览器历史纪录添加记录history.replaceState 修改浏览器历史纪录中当前纪录history.popState 当 history 发生变化时触发// 定义 Routerclass Router { constructor () { this.routes {}; this.listerPopState() } init(path) { history.replaceState({path: path}, null, path); this.routes[path] this.routes[path](); } route(path, callback){ this.routes[path] callback; } push(path) { history.pushState({path: path}, null, path); this.routes[path] this.routes[path](); } listerPopState () { window.addEventListener(popstate , e { const path e.state e.state.path; this.routers[path] this.routers[path]() }) }}// 使用 Routerwindow.miniRouter new Router();miniRouter.route(/, () console.log(page1))miniRouter.route(/page2, () console.log(page2))// 跳转miniRouter.push(/page2) // page2解决404看到这里我相信大部分同学都能想到怎么解决问题了产生问题的本质是因为我们的路由是通过JS来执行视图切换的当我们进入到子路由时刷新页面web容器没有相对应的页面此时会出现404所以我们只需要配置将任意页面都重定向到 index.html把路由交由前端处理还是以 nginx 为例更多版本的大家可以前往https://router.vuejs.org/zh/guide/essentials/history-mode.html 查看location / { try_files $uri $uri/ /index.html;}这里有一个小细节如果出现真的 404 页面了呢比如 website.com/notfound因为这么做以后你的服务器就不再返回 404 错误页面因为对于所有路径都会返回 index.html 文件。为了避免这种情况你应该在 Vue 应用里面覆盖所有的路由情况然后在给出一个 404 页面const router new VueRouter({ mode: history, routes: [ { path: *, component: NotFoundComponent } ]})两个猪头是什么意思..能不能评论区告诉我..包邮送书今天为大家推荐一本新书《Vue.js入门与商城开发实战》免费包邮送给大家简单介绍一下本书主要面向Vue.js的初级入门者涵盖详细的理论知识、布局分析和逻辑分析还有丰富的实战案例、详细的代码解说具有很强的实用性。全书主要内容分三部分基础知识、技能提升、商城开发案例。基础知识部分包括Vue.js入门、数据绑定、表单和双向数据绑定、条件和循环指令、样式绑定、事件处理器、监听和计算属性。技能提升部分包括Vue.js的组件自定义指令和响应接口路由、动画和过渡Vue.js中的插件Axios等。商城开发案例部分包括一个商城项目的大部分功能如首页开发、用户管理、实现产品和新闻页面、购物和订单处理等更多信息大家可以点击下方小程序查看这次准备了多种方式抽奖「集赞、走心、在看」这三种方式都可以参与感谢亲爱的读者们你们的支持也是我持续更文最大的动力。为了避免中奖后失联请务必添加小萌猫微信:留言抽奖 (55)大奖: 留言点赞数「第1,2,3名」可获得一本 《Vue.js入门与商城开发实战》走心奖: 留言「2名」可获得一本 《Vue.js入门与商城开发实战》参与奖: 随机抽取「5位」优质评论送出「10.24元」红包再看抽奖 (35)ps: 记得先添加小萌猫微信不然看不到哪些小伙伴点在看大奖: 随机抽取「3位」可获得一本 《Vue.js入门与商城开发实战》次奖: 随机抽取「5位」优质评论送出「10.24元」红包- END -近期不要再问我跨域的问题了 | 原理剖析Webpack 5 发布Chrome 86 支持本地文件系统若此文有用何不素质三连❤️
