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 模式的路由了。

你可能感兴趣的:(前端,笔记,vue.js,学习,笔记,路由)