Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时,Nginx的配置方式

这篇具有很好参考价值的文章主要介绍了Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时,Nginx的配置方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、History 模式、Hash 模式

  Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用的前端路由。它允许你通过定义路由配置来映射不同的 URL 到对应的组件,实现页面间的跳转和导航。Vue Router 支持两种路由模式:history 模式和 hash 模式。

1、History 模式

  在 History 模式下,Vue Router 通过使用 HTML5 History API 来管理路由,不会在 URL 中使用哈希(#)作为路由的标记。相反,它依赖于浏览器的 History API 来管理 URL 的变化。

  使用 History 模式需要后端服务器的配合。当用户在浏览器中直接访问页面时,或者刷新页面时,后端服务器需要配置,以确保返回对应的前端路由页面。这是因为在 History 模式下,前端的路由和后端的路由是分离的,后端需要将所有路由请求都重定向到前端的入口页面。

  • 使用 history 模式时,URL 中没有 # 符号。
  • 通过 HTML5 History API (pushState 和 replaceState) 改变 URL,实现前端路由跳转。
  • 服务器需要进行相应的配置,以确保在刷新页面或直接访问某个子路由时,仍能正确返回前端路由对应的页面。
  • 示例 URL:https://example.com/my-route
2、Hash 模式

  在 Vue Router 中,Hash 模式是一种简单且常见的路由模式,它使用 URL 中的哈希(#)来管理路由。当 URL 中的哈希值发生变化时,Vue Router 将根据哈希值来匹配对应的路由。

  • 使用 hash 模式时,URL 中会有一个 # 符号,后面跟着路由路径。
  • 通过监听 hashchange 事件来改变 URL 中的哈希值,实现前端路由跳转。
  • 不需要服务器进行特殊配置,因为哈希部分的变化不会发送到服务器。
  • 示例 URL:https://example.com/#/my-route
3、History 模式 与 Hash 模式 的区别
  1. History 模式的 URL 更美观和干净,更类似传统的 URL 结构。
  2. Hash 模式的 URL 兼容性好,不需要特殊的服务器配置,可以在几乎所有的环境中使用。
  3. 在使用 History 模式时,需要确保服务器端配置正确,以便在刷新页面或直接访问子路由时,能正确返回对应的页面。而 Hash 模式不需要这样的配置。

  总之,History 模式的 URL 可能会更符合用户的习惯,但需要对服务器进行配置。Hash 模式则更简单易用,但 URL 中会有一个 # 符号。选择使用哪种路由模式,取决于项目需求和服务器环境。

二、使用History 模式时,Nginx服务器配置

  History 模式时,服务器需要进行相应的配置,以确保在刷新页面或直接访问某个子路由时,仍能正确返回前端路由对应的页面。当使用的是 Nginx 服务器时,可以使用 try_files 配置将所有请求重定向到前端入口页面。同时,在vue项目中也需要增加相关配置,保证路由地址正确,具体实现如下:

  首先,main.js文件,需要引入router路由,代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index";

Vue.config.productionTip = false

new Vue({
	router,
  render: h => h(App),
}).$mount('#app')

  然后,App.vue文件,基础配置,不需要特殊处理,代码如下:

<template>
  <div id="app">
    <h1>APP B</h1>
	<router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>

  然后,修改路由配置文件./router/index.js,在该文件我们配置了History 模式,同时还需要配置base路径,保证路由访问时的正确。代码实现如下:

import VueRouter from 'vue-router';
import Hello from "../components/Hello.vue"
import Vue from "vue";

Vue.use(VueRouter)
const router = new VueRouter({
	mode: 'history',
	base:'/app2/',
    routes:[
        {
            path: '/hello',
            name: 'hello',
            component: Hello
        },
    ],
})

export default router;

  然后,修改打包配置文件vue.config.js,这里需要保证publichPath 与上述的baseUrl匹配,对应的项目部署在服务器上的二级目录地址“/app2/”。

module.exports = {
  transpileDependencies: ["vue"],
  publicPath: '/app2/', // 设置上下文路径,与Tomcat或Nginx中的上下文路径保持一致
  indexPath: 'index.html', // 相对于打包路径index.html的路径
  outputDir: process.env.outputDir || 'app2', // 'dist', 生产环境构建文件的目录
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
};

  最后,修改Nginx的配置文件nginx.conf,通过使用try_files实现将所有请求重定向到前端入口页面,配置如下:

server {
      listen       8000;
      server_name  192.168.1.87;
	  root   html;
      location /app2 {
	     try_files $uri $uri/ /app2/index.html;
      }
}

  根据上述的配置,我们的前端页面位置,应该在nginx根目录的./html/app2/中部署。至此,我们就可以正常使用History 模式的路由了。文章来源地址https://www.toymoban.com/news/detail-728729.html

到了这里,关于Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时,Nginx的配置方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 路由hash模式改成history模式的前端vue配置与后端配置

    示例项目地址:http://172.00.00.000:8888/Web/static/index.html/index ,其中: /Web/static/ 表示项目部署路径,每个人的路径不一样,vue默认路径是根路径/,如果你项目不是部署在根路径,那就需要修改一些配置 index.html 表示项目入口文件 /index 表示项目首页的路由地址 vue前端配置 1.配置路

    2024年02月15日
    浏览(51)
  • 前端路由hash模式以及history模式详解

    在前后端分离的项目中,前端一般使用 SPA 单页面应用模式来开发项目。那么,什么是 SPA 呢? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 我的理解: 单页面应用就是

    2024年02月10日
    浏览(39)
  • 解密前端路由: hash模式vs.history模式

    当你构建一个网站时,可能会遇到如何处理 URL 的问题。在URL中,有两种常见的模式: hash模式和history模式 。 1. Hash模式(哈希模式): 在 hash 模式中, URL 中的 hash (即#号后面的部分)用于标记网页的不同部分或状态。当 URL 的 hash 发生改变时,页面不会重新加载,而是通

    2024年02月11日
    浏览(45)
  • vueRouter中Hash模式和History模式有什么区别

    VueRouter是Vue.js官方推荐的前端路由库,它提供了一种方便的方式来构建单页应用(SPA)。在使用VueRouter时,我们可以选择不同的路由模式,其中最常见的是Hash模式和History模式。本文将深入探讨这两种模式的区别,并提供示例代码来帮助读者更好地理解它们。 Hash模式是VueRo

    2024年02月19日
    浏览(36)
  • nginx 部署vue项目,路由模式为history时,页面刷新404问题

    nginx部署vue项目,文件放在html下的dist文件夹中 nginx.conf 文件中,server 里配置文件的位置、请求跨域等信息 在启动项目后因为配置的是root,首先是找不到html下面的sys-test文件夹,再经过配置修改为alias配置后,刷新又会报404错误,最终配置为如下,成功解决 因为打包部署后,

    2023年04月08日
    浏览(57)
  • Vue history和hash模式

             ~~~~~~~~                 在Vue.js中,路由模式是用来管理应用程序中不同页面之间的导航的机制。Vue Router支持两种常见的路由模式:history模式和hash模式。 History 模式:          ~~~~~~~~                 History模式使用浏览器的history.pushState API 来管理路由。它

    2024年02月12日
    浏览(37)
  • vue3中路由hash与History的设置

     history模式直接指向history对象,它表示当前窗口的浏览历史,history对象保存了当前窗口访问过的所有页面网址。URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。 当使用history模式时,

    2024年02月16日
    浏览(67)
  • Vue-router中的Hash模式与History模式

    在Vue Router中,Hash模式是一种URL的哈希模式,也被称为锚点模式。在Hash模式下,URL中的哈希部分(即#号后面的内容)会被用作路由的标识符,而不会触发浏览器向服务器发送请求。 Hash模式的URL示例: http://example.com/#/home 在Hash模式下,Vue Router会监听URL中哈希部分的变化,并

    2024年02月15日
    浏览(47)
  • Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用

     html部分 js部分  html页面使用路由传来的参数  获取router跳转id 获取 路由跳转错误地址

    2024年02月11日
    浏览(45)
  • VUE 配置history路由模式配置

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

    2024年02月10日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包