2

介绍Vue router的history模式以及如何配置history模式 - azoux

 10 months ago
source link: https://www.cnblogs.com/azoux/p/17536230.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
1.介绍Vue router的history模式以及如何配置history模式07-07

Vue router给我们提供了两种路由模式，分别是hash模式和history模式。其中默认是使用hash模式，即URL中带有一个#符号，但是处于业务或个人喜爱的差别，Vue router也提供了history模式。但是由于Vue是单页SPA应用，所以每个路由并没有对应的html文件。

什么是history模式

history模式特点

  • history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。
  • 在history模式下，URL看起来更加整洁，没有#符号。例如，http://example.com/user/profile。
  • history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验

history模式的优缺点

  1. 更友好的URL：history模式下的URL看起来更加整洁，没有特殊字符（如#），给用户提供了更好的阅读体验。
  2. 无刷新页面切换：使用history模式时，页面切换不会导致整个页面的刷新，仅仅改变URL，从而实现更加流畅的用户体验。
  3. 更好的SEO：搜索引擎对于history模式下的页面更容易进行抓取和索引，因为URL更加直观、语义化。
  4. 路由传参更方便：相比hash模式的URL传参，history模式下的传参更加直观简洁，参数可以直接通过URL的路径进行表示。
  1. 服务器配置要求：使用history模式需要服务器的支持，因为URL改变时，要确保服务器能正确地展示相应的页面，需要进行一些额外的服务器配置。
  2. 兼容性问题：history模式在一些旧版本的浏览器（如IE9及以下）中不被支持，如果要兼容这些浏览器，可能需要降级为hash模式。
  3. 开发环境要求：当使用history模式时，需要在开发环境中配置一个服务器来模拟URL的请求，以确保路由正常运行，相比hash模式需要更多的配置。

如何配置Vue Router使用history模式

- 首先我们需要创建一个Vue项目
   - 安装Vue Router

npm i vue-router

- 在Vue项目中配置Vue Router使用history模式

import Vue from 'vue';import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({  mode: 'history',  routes: [    // 路由配置  ]}); export default router;
  1. 服务器配置
       - 配置服务器，使得所有路由的URL都指向入口页面，我们用nginx配置举例：
server {  listen 80;  server_name your_domain.com;  root /path/to/your/vue_app/dist;  index index.html;  location / {    try_files $uri $uri/ /index.html;  }} # 在以上配置中，需要进行以下调整：# 1. server_name：将your_domain.com替换为您的域名。# 2. root：将/path/to/your/vue_app/dist替换为您的Vue应用的编译输出目录。# 3. index：确保index.html是您的Vue应用的入口页面。 # 配置解释：# • location /：此处表示对所有的请求都生效。# • try_files $uri $uri/ /index.html：当请求的文件或目录不存在时，将请求重定向到index.html。这使得所有的路由请求都指向了Vue应用的入口页面，使得应用能够正确地处理动态路由。

处理404页面

// 在路由配置中定义一个名为NotFound的路由const routes = [  // 其他路由配置...  { path: '/404', name: 'NotFound', component: NotFoundComponent },  { path: '*', redirect: '/404' }] // 创建Vue Router实例并将路由配置应用于它const router = new VueRouter({  mode: 'history',  routes}) // 导航守卫用于捕获404错误router.beforeEach((to, from, next) => {  // 如果目标路由不存在，重定向到404页面  if (to.matched.length === 0) {    next('/404');  } else {    next();  }})

配置publicPath

如果你希望你的Vue应用打完包以后，所有路由的前缀都加上/v1/test，那么你需要对原有的配置做一下修改

vue.config.js

publicPath这里需要判断一下是否为生产环境，如果是生产环境，我们需要加上前缀，这样在读取js、css等文件时才能访问到正确的路径。如果是开发环境，基本URL配置为'/'即可。在开发环境中，我们的应用通常运行在一个本地的开发服务器上（例如：localhost:8080），而不是真实的生产环境服务器（例如：https://www.example.com）。因此，'/'可以作为根路径来访问我们的应用，而不需要添加任何前缀。

module.exports = {  // 部署应用包的基本URL  publicPath: process.env.NODE_ENV === 'production' ? '/v1/test/' : '/',  devServer: {    port: 8080,    open: true,    proxy: {}  }}

nginx配置

server {  listen 80;  server_name your_domain.com;  root /path/to/your/vue_app/dist;  index index.html;  location /v1/test { # 这里location需要加上/v1/test    try_files $uri $uri/ /index.html;  }}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK