一、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 模式 的区别
- History 模式的 URL 更美观和干净,更类似传统的 URL 结构。
- Hash 模式的 URL 兼容性好,不需要特殊的服务器配置,可以在几乎所有的环境中使用。
- 在使用 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实现将所有请求重定向到前端入口页面,配置如下:文章来源:https://www.toymoban.com/news/detail-728729.html
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模板网!